1、安裝依賴(lài)? npm install webpack-bundle-analyzer@^3.0.3
2、對(duì)package.json文件進(jìn)行配置
scripts下添加一條指令："bundle-report": "webpack-bundle-analyzer dist/stats.json"
3、對(duì)angular.json文件進(jìn)行配置?
????????????"outputPath": "dist",
architect配置如下
"architect": {
? "build": {
? ? "builder": "@angular-devkit/build-angular:browser",
? ? "options": {
? ? ? "outputPath": "dist",
? ? ? "index": "src/index.html",
? ? ? "main": "src/main.ts",
? ? ? "tsConfig": "src/tsconfig.app.json",
? ? ? "polyfills": "src/polyfills.ts",
? ? ? "assets": [
? ? ? ? "src/assets",
? ? ? ? "src/favicon.ico",
? ? ? ? {
? ? ? ? ? "glob": "**/*",
? ? ? ? ? "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
? ? ? ? ? "output": "/assets/"
}
? ? ? ],
? ? ? "styles": [
? ? ? ? "node_modules/bootstrap/dist/css/bootstrap.css",
? ? ? ? "node_modules/font-awesome/css/font-awesome.css",
? ? ? ? "node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
? ? ? ? "node_modules/ng-zorro-antd/src/ng-zorro-antd.less",
? ? ? ? "src/styles.scss",
? ? ? ? "src/animate.css"
? ? ? ],
? ? ? "scripts": [
? ? ? ? "node_modules/jquery/dist/jquery.js",
? ? ? ? "node_modules/echarts/dist/echarts.min.js",
? ? ? ? "src/assets/js/fingerprint.js",
? ? ? ? "node_modules/echarts/lib/chart/map/china.js"
? ? ? ]
? ? },
? ? "configurations": {
? ? ? "test": {
? ? ? ? "optimization": false,
? ? ? ? "outputHashing": "all",
? ? ? ? "sourceMap": false,
? ? ? ? "extractCss": true,
? ? ? ? "namedChunks": false,
? ? ? ? "aot": true,
? ? ? ? "extractLicenses": true,
? ? ? ? "vendorChunk": false,
? ? ? ? "buildOptimizer": false,
? ? ? ? "fileReplacements": [
? ? ? ? ? {
? ? ? ? ? ? "replace": "src/environments/environment.ts",
? ? ? ? ? ? "with": "src/environments/environment.test.ts"
? ? ? ? ? }
? ? ? ? ]
? ? ? },
? ? ? "production": {
? ? ? ? "optimization": true,? //? optimization buildOptimizer 兩個(gè)參數(shù)改為false不壓縮，打包后提交大一倍，但是構(gòu)建時(shí)間減少一倍，上生產(chǎn)改成true，測(cè)試為false
? ? ? ? "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"
? ? ? ? ? }
? ? ? ? ]
? ? ? }
? ? }
? },
? "serve": {
? ? "builder": "@angular-devkit/build-angular:dev-server",
? ? "options": {
? ? ? "browserTarget": "micro-service:build",
? ? ? "proxyConfig": "proxy.config.json"
? ? },
? ? "configurations": {
? ? ? "test": {
? ? ? ? "browserTarget": "micro-service:build:test"
? ? ? },
? ? ? "production": {
? ? ? ? "browserTarget": "micro-service:build:production"
}
? ? }
? },
? "extract-i18n": {
? ? "builder": "@angular-devkit/build-angular:extract-i18n",
? ? "options": {
? ? ? "browserTarget": "micro-service:build"
? ? }
? },
? "test": {
? ? "builder": "@angular-devkit/build-angular:karma",
? ? "options": {
? ? ? "main": "src/test.ts",
? ? ? "karmaConfig": "./karma.conf.js",
? ? ? "polyfills": "src/polyfills.ts",
? ? ? "tsConfig": "src/tsconfig.spec.json",
? ? ? "scripts": [
? ? ? ? "node_modules/jquery/dist/jquery.js",
? ? ? ? "node_modules/popper.js/dist/umd/popper.js",
? ? ? ? "node_modules/echarts/dist/echarts.min.js",
? ? ? ? "src/assets/js/fingerprint.js",
? ? ? ? "node_modules/echarts/lib/chart/map/china.js"
? ? ? ],
? ? ? "styles": [
? ? ? ? "node_modules/bootstrap/dist/css/bootstrap.css",
? ? ? ? "node_modules/font-awesome/css/font-awesome.css",
? ? ? ? "node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
? ? ? ? "node_modules/ng-zorro-antd/src/ng-zorro-antd.less",
? ? ? ? "src/styles.scss",
? ? ? ? "src/animate.css"
? ? ? ]
}
? },
? "lint": {
? ? "builder": "@angular-devkit/build-angular:tslint",
? ? "options": {
? ? ? "tsConfig": [
? ? ? ? "src/tsconfig.app.json",
? ? ? ? "src/tsconfig.spec.json"
? ? ? ],
? ? ? "exclude": [
? ? ? ? "**/node_modules/**"
? ? ? ]
}
? }
}
4、執(zhí)行ng build --prod --stats-json
5、最后執(zhí)行npm run bundle-report 會(huì)單獨(dú)打開(kāi)一個(gè)頁(yè)面展示如下，可以一目了然的看到各個(gè)模塊大小和nginx壓縮后的大小
