如何在 angular 2,4,6,7,8,9,10 中减小 vendor.js 的大小？

Question

Angular CLI 创建 vendor.js 但我不知道为什么以及它有什么用？？对于新应用程序，此文件的大小约为 3.2MB！！

此文件是否包含 Angular 6 Javascript 来源?

您不认为这是在低速连接下加载到互联网上的大文件吗？

Answer 1

此文件包含您添加到项目中的所有库。如果您在生产模式下构建应用程序，文件大小会更小。

ng build --prod

Answer 2

您可以完全删除文件，而不是减少它通过指定 --build-optimizer 标志，cli 将从构建输出中禁用此文件。

CLI 现在会将供应商代码捆绑到 main.js 捆绑包中，这也将启用丑化以减小大小。

所以你会看到 main.js 包的大小略有增加，与供应商块的大小相比是最小的

Answer 3

您可能还想更新 package.json 中的构建脚本以默认生成产品构建。我运行参与部署到 Heroku，因为它会自动运行 'npm build'。默认情况下，'npm build' 运行以下脚本：

ng build

如果更新为

ng build --prod

在 package.json 中，然后 Heroku/AWS/Azure 将改为在部署时创建生产构建。

Answer 4

尝试

ng build --prod --aot --vendor-chunk --common-chunk --delete-output-path --buildOptimizer

我将 vender.**.js 从 12 mb 减少到 2mb

Answer 5

在 angular.json 配置文件中，您需要更改以下值：

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

如何在 angular 2,4,6,7,8,9,10 中减小 vendor.js 的大小？

How to decrease size of vendor.js in angular 2,4,6,7,8,9,10?

javascript

angular-cli

angular

angular-cli-v6