Angular中使用bundle分析工具

在项目中安装:

npm install --save-dev webpack-bundle-analyzer

在package.json中添加

"bundle-report": "webpack-bundle-analyzer dist/stats.json"

用ng cli构建,注意加--stats-json

ng build --prod --stats-json

运行

npm run bundle-report

然后就会生成一张图,可以看到构建后的各个js文件包含的模块和大小

发现几个能优化的点:
+ 如果使用了moment.js 可以把里面local的各种语言删一删留着需要用的就行了,不然都会构建进去
+ 没用的模块一定要删了x3,app-component里引入了rxjs但是后来看发现完全没用(这种好像可以用摇树优化)

Comments
Write a Comment