(1). 作用:
①. 查看打包后的文件大小与其中组成成分:
a. 查看哪些文件占用较大
b. 打包后所有组件与组件间的依赖关
c. 针对多余的包文件过大,对首次影响加载的效率问题进行剔除修改
(2). 实现:
①. webpack build --report
②. package.json中scripts命令:
"build:report": "vue-cli-service build --report"
(3). 可视化工具:
①. 插件名称:
webpack-bundle-analyzer
https://github.com/webpack-contrib/webpack-bundle-analyzer
②. 作用:
a. 将捆绑内容表示为方便的交互式可缩放树形图
③. 模块功能:
a. 文件打包压缩后中真正的内容
b. 找出哪些模块组成最大的大小
c. 找到错误的模块
d. 支持缩小捆绑,会解析它们实际大小的捆绑模块、gzipped大小.
④. 花裤衩模板已集成,否则需要自己安装与配置:
a. 新版vue-cli已经集成该插件.
(4). webpack-chart:
①. package.json中scripts命令:
"build:chart": "vue-cli-service build --profile --json > stats.json",