Question

一旦我构建main.js大约8 mb，我就在使用Angular 6，因为我们构建这个应用程序时我期望它会变得更大。有没有办法将此文件拆分为多个文件，以便更快地加载？是否有办法在需要时实现延迟加载。

chunk {0} runtime.ec2944dd8b20ec099bf3.js (runtime) 1.44 kB [entry] [rendered]
chunk {1} main.d2ed080a489df2acb65c.js (main) 8.27 MB [initial] [rendered]
chunk {2} polyfills.991eda935898a57f5c1f.js (polyfills) 59.6 kB [initial] [rendered]
chunk {3} styles.5bc2644258354e9b9ba3.css (styles) 680 kB [initial] [rendered]
chunk {scripts} scripts.92795880e21717c67f9d.js (scripts) 40.3 kB  [rendered]

angular.json

  "configurations": {
    "production": {
      "optimization": true,
      "outputHashing": "all",
      "sourceMap": false,
      "extractCss": true,
      "namedChunks": false,
      "aot": true,
      "extractLicenses": true,
      "vendorChunk": false,
      "buildOptimizer": true,
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ]
    },

Answer 1

首先，我强烈建议您更新Angular版本。
是的，您可以将main.js分成几个块，但是我认为延迟加载是使您的应用程序更快所需的。

Angular CLI拆分块步骤
在docs中：使用Angular CLI选项可以拆分common和vendor块。您可以将这些设置添加到项目的angular.json或直接使用：
ng build --commonChunk --vendorChunk
但是我认为这些选项在angular v6中可能不可用。无论如何，您都可以使用自定义生成器执行相同的操作（见下文）。

自定义拆分块步骤
更改angular.json中的builder，并添加webpack.config.js的路径以使用自定义Webpack配置进行构建和服务：

       "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
                 "path": "./webpack.config.js"
              },
...
        "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",

在webpack.config.js中，您可以做webpack可以做的所有事情。这是shared块的示例：

module.exports = function(base) {
    return {
        ...base,
        optimization: {
          ...base.optimization,
          splitChunks: {
            ...base.optimization.splitChunks,
            cacheGroups: {
              ...base.optimization.splitChunks.cacheGroups,
              myCustomChunk: {
                test: /MyCustomRegexpToGrabFiles/, // search files by pattern
                enforce: true,                     // always split this chunk
                name: 'myCustomChunk',             // name will be myCustomChunk.js
                chunks: 'all'                      // split it from lazy and common chunks
              }
            }
          }
        }
    }
}

有关更多示例，请查看SplitChunksPlugin docs。

延迟加载步骤
使用webpack延迟加载将始终创建单独的块。
基本上，您应该只针对Angular v6遵循此guide。

将Angular6中的main.js拆分为多个文件

1 个答案: