静态文件夹 v/s 浏览器文件夹

Question

使用Angular universal构建Angular项目时，在dist文件夹中生成3个文件夹。

服务器
静态
浏览器

server 文件夹用于在服务器上进行预渲染。但是，static 和 browser 文件夹用于在静态主机上部署网站。

static 和 browser 文件夹有什么区别？部署哪个更好？

编辑 1： 我认识到 static 和 browser 文件夹在部署时具有相同的内容但结构不同。

在静态版本中：index.html 和一些文件（js、css、...）在根文件夹中，此外，每个组件都有自己的文件夹，其中包含一个 index.html 对应组件.
在浏览器版本中：一个index.html和一些文件（js，css，...）在根文件夹中，没有与组件对应的文件夹（它们的模板嵌入在根中文件夹文件）。

以下是Angular.json文件内容：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "myapp": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/browser",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": ["src/favicon.ico", "src/assets"],
            "styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/font-awesome/css/font-awesome.min.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "myapp:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "myapp:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "myapp:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": ["src/styles.css"],
            "scripts": [],
            "assets": ["src/favicon.ico", "src/assets"]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
            "exclude": ["**/node_modules/**"]
          }
        },
        "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/server",
            "main": "src/main.server.ts",
            "tsConfig": "src/tsconfig.server.json"
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ]
            }
          }
        }
      }
    },
    "myapp-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "prefix": "",
      "architect": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "myapp:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "myapp:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": ["**/node_modules/**"]
          }
        }
      }
    }
  },
  "defaultProject": "myapp"
}

Answer 1

TL;DR;

您至少需要部署 browser 文件夹，该文件夹将始终被使用。如果您想快速加载这些页面，请为您的静态路由部署 static 文件夹，如果您的托管服务器允许 nodejs 到运行并且您需要，请部署 server 文件夹为动态路由做动态渲染（用于快速加载和 SEO 友好的页面）。

说明

使用 angular 通用时，您必须区分动态渲染和 pre-rendering。

动态渲染

每当您访问页面时，angular universal 将呈现页面（使用 nodejs，使用 server 目录中的服务器包），将生成的内容发送回客户端（使用组件html 已经显示，内联 CSS)。页面加载后，来自客户端 angular 应用程序的 JS 将接管，使用 browser 文件夹中的文件（因此样式和 js 文件）

Pre-rendering

使用 pre-rendering，在部署之前，脚本将解析您在路由中定义的所有静态路由（/contact、/about、...），执行渲染这些路线，并将生成的 html 保存在 static 文件夹中，每个文件夹有一个 index.html 文件（文件夹对应一条路线）。因此，在您访问您的网站之前，您已经生成了正确的 html。

例如，当您访问contact 路由时，将返回dist/static/contact/index.html 文件。但是，与动态呈现一样，一旦页面加载完毕，您仍将拥有 browser 文件夹中的 angular JS 应用程序，该应用程序将接管。如果只使用预渲染，则不需要 nodejs。

您可能可以部署所有 3 个文件夹。 browser 将始终需要，您可以将 static 文件夹用于静态路由，并让 nodejs 使用 server 文件夹为动态路由呈现页面

查看更多信息 pre-rendering here

静态文件夹 v/s 浏览器文件夹

Static folder v/s browser folder

angular-universal

angular