将Angular6中的main.js拆分为多个文件 [英] Split main.js in Angular6 into multiple files

问题描述

我使用的是角度6，一旦我构建main.js大约是8MB，当我们构建这个应用程序时，我希望它会变得更大。有没有办法将此文件拆分成多个文件，以便它们加载得更快？是否有办法在需要时实现延迟加载。

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"
        }
      ]
    },

推荐答案

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

角CLI拆分块步骤
从docs：使用Angular CLI选项可以拆分common和vendor块。 您可以将这些设置添加到项目的angular.json或直接使用：
ng build --commonChunk --vendorChunk
但我认为这些选项在ANGLING 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
              }
            }
          }
        }
    }
}

有关更多示例，请查看SplitChunksPlugindocs。

延迟加载步骤
webpack的惰性加载总是会产生单独的块。
基本上，对于角度V6，您只需遵循此guide。

这篇关于将Angular6中的main.js拆分为多个文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！