webpack打包分析

分析一：打包的时间分析

1. 如果我们希望看到每一个loader、每一个Plugin消耗的打包时间，可以借助于一个插件：speed-measure-webpack-plugin
2. 注意：该插件在最新的webpack版本中存在一些兼容性的问题（和部分Plugin不兼容）
3. 截止2021-3-10日，但是目前该插件还在维护，所以可以等待后续是否更新；
4. 我这里暂时的做法是把不兼容的插件先删除掉，也就是不兼容的插件不显示它的打包时间就可以了；
5. 第一步，安装speed-measure-webpack-plugin插件
6. 第二步，使用speed-measure-webpack-plugin插件
7. 创建插件导出的对象 SpeedMeasurePlugin；
8. 使用 smp.wrap 包裹我们导出的webpack配置；

分析二：打包后文件分析

1. 方案一：生成一个stats.json的文件
2. "buiebpack ld:stats": "w--config ./config/webpack.common.js --env production --profile --json=stats.json",
3. 通过执行npm run build:status可以获取到一个stats.json的文件：
4. 这个文件我们自己分析不容易看到其中的信息；
5. 可以放到 https://webpack.github.io/analyse/，进行分析
6. 方案二：使用webpack-bundle-analyzer工具
7. 另一个非常直观查看包大小的工具是webpack-bundle-analyzer。
8. 第一步，我们可以直接安装这个工具：npm install webpack-bundle-analyzer -D
9. 第二步，我们可以在webpack配置中使用该插件：
10. 在打包webpack的时候，这个工具是帮助我们打开一个8888端口上的服务，我们可以直接的看到每个包的大小。
11. 比如有一个包时通过一个Vue组件打包的，但是非常的大，那么我们可以考虑是否可以拆分出多个组件，并且对其进行懒加载；
12. 比如一个图片或者字体文件特别大，是否可以对其进行压缩或者其他的优化处理；