>[success] # webpack 项目分析 ~~~ 1.想优化给先做好项目分析，优化不是盲目去做要先发现问题，在针对性去优化 ~~~ >[info] ## 输出构建信息 ~~~ 1.利用配置指令'--json':以json格式输出构建结果，最后只输出一个json文件（包含所有的构建信息） 具体配置在可以在'package.json'， { "scripts": { "build:stats": "webpack --json > stats.json" } } 运行完后会根目录生成' stats.json'里面有构建的信息，如果想指定获取可以使用 'StatsWebpackPlugin 和 WebpackStatsPlugin'两个插件对构建信息指定内容获取这可以直接参考对应的 文档使用即可 2.官方也提供了可视化的方案帮助来分析'生成的json文件'具体可以参考链接 'https://webpack.js.org/guides/code-splitting/#bundle-analysis'其中'webpack-chart','webpack-visualizer' 和'webpack bundle optimize helper'都是需要将生成的'json文件上传其提供的网站上帮你生成图形化效果图' ~~~ >[danger] ##### 配置一些辅助 ~~~ 1.color 输出结果带彩色，比如：会用红色显示耗时较长的步骤 2.profile 输出性能数据，可以看到每一步的耗时 3.progress 输出当前编译的进度，以百分比的形式呈现 配置后效果'"webpack --display-modules --profile --progress --colors" ',，'--progress --profile ' 这两个配置是属于webpack 自身的在任何环境都可以加，可以帮你显示打包进度条，和时序显示 ~~~ >[danger] ##### 更多的工具参考 [更多分析工具参考](https://survivejs.com/webpack/optimizing/build-analysis/) >[info] ## 实践 ~~~ 1.上面推荐了很多工具，这里实践选择了'speed-measure-webpack-plugin' 和'webpack-bundle-analyzer' 1.1.'准备基于时间的分析工具',来帮助我们统计项目构建过程中在编译阶段的耗时情况 'speed-measure-webpack-plugin' 1.2.'准备基于产物内容的分析工具',找到那些冗余的、可以被优化的依赖项。通常，减少这些冗余的依赖包模块 不仅能减小最后的包体积大小，也能提升构建模块时的效率'webpack-bundle-analyzer' ~~~ [speed-measure-webpack-plugin](https://www.npmjs.com/package/speed-measure-webpack-plugin) [webpack-bundle-analyzer](https://www.npmjs.com/package/webpack-bundle-analyzer)