前端性能优化二十二：花裤衩模板打包实战可视化工具

(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",