1、安装依赖 npm install webpack-bundle-analyzer@^3.0.3
2、对package.json文件进行配置
scripts下添加一条指令："bundle-report": "webpack-bundle-analyzer dist/stats.json"
3、对angular.json文件进行配置
"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 两个参数改为false不压缩，打包后提交大一倍，但是构建时间减少一倍，上生产改成true，测试为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、执行ng build --prod --stats-json
5、最后执行npm run bundle-report 会单独打开一个页面展示如下，可以一目了然的看到各个模块大小和nginx压缩后的大小
网友评论