如何减少ng build --prod捆绑文件大小

时间:2019-03-11 09:57:33

标签: angular build

部署ng build --prod dist文件夹后 Dist folder

我正在使用带有“ CustomPreloadingStrategy”的角度6和延迟加载模块,并启用了GZIP压缩。 引用为link的用户需要减少bundle js文件。

ng服务--prod (初始加载页面完成时间少于3秒)

chunk {1} main.e15dbe5b36838602da7f.js (main) 1.18 MB [initial] [rendered]
chunk {5} vendor.f69386968aafba8d79d3.js (vendor) 2.24 MB [initial] [rendered]

ng build --prod (初始加载页面完成时间少于15秒)      因此需要在3秒内完成初始加载页面

我的项目文件很大,文件大小超过50 MB,因此在用ng build --prod部署后,它的大小为10 MB。

chunk {1} main.ea8033fd76e2ff3ea29d.js (main) 3.28 MB [initial] [rendered]//after ng build --prod main.js file more than 3.28 MB so need to decrease size of bundle size.
chunk {4} 4.f621cfb9a654b1c82a9f.js () 1.53 MB  [rendered]

tsconfig.json

   {
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
    }
  }

angular.json //这里我有生产环境路径

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

0 个答案:

没有答案