如何在角度6中减小vendor.js的大小？

Question

Angular CLI创建vendor.js并且我不知道为什么和它有什么用？对于新应用,此文件的大小约为3.2MB!

此文件是否包含Angular 6 Javascript Source？

难道你不认为这是在低速连接上加载互联网的大文件吗？

Answer 1

尝试

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

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

Answer 2

你的意思是如何减少？此文件包含您添加到项目中的所有库.如果您在生产模式下构建应用程序,它将会低得多.

ng build --prod

如果不是您的答案,请详细说明您的需求.

Answer 3

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

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

因此，您将看到 main.js 包的大小略有增加，与供应商块的大小相比，这是最小的

Answer 4

您可能还想更新 package.json 中的构建脚本以默认生成 prod 构建。我遇到了这个部署到 Heroku 的问题，因为它会自动运行“npm build”。默认情况下，'npm build' 运行以下脚本：

ng build

如果您将其更新为

ng build --prod

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

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