14、性能优化之打包分析

打包时间的分析

我们每次进行打包时，都会消耗一定的时间。但是正常情况下我们只能看到总共的一个打包时间。

如果我们想要看到每一个loader和plugin在打包时所消耗的具体时间，然后考虑是否继续使用某个loader和plugin。
可以借助speed-measure-webpack-plugin插件。

安装：

npm install speed-measure-webpack-plugin -D

使用：

//webpack.config.js  
// 测量打包时间的插件  
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');  
//SpeedMeasurePlugin是一个类，我们需要创建一个实例  
const smp = new SpeedMeasurePlugin();  
module.exports = function(env) {  
  const isProduction = env.production;  
  process.env.NODE_ENV = isProduction ? "production" : "development";  
  const config = isProduction ? prodConfig : devConfig;  
  const mergeConfig = merge(commonConfig(isProduction), config);  
  // return mergeConfig  
  //使用smp实例的wrap包裹所有配置  
  return smp.wrap(mergeConfig);  
};

结果：
我们就可以清晰地在终端看到每个loader与plugin所消耗的时间

注意点：
目前speed-measure-webpack-plugin这个插件存在兼容性问题，它对于部分loader或plugin不能兼容，会在打包时报错表示哪些loader或plugin是不兼容的。
我们只能选择暂时注释掉这些不兼容loader或plugin的使用，或者尝试降低版本看是否兼容。

打包后的文件分析

我们可以在webpack官方文档找到好几种对打包后的文件分析的方案：其中包括官方给出的分析方案，还有好几种社区支持的方案。

方案一：官方的分析工具

第一步：
在package.json里添加如下命令。执行命令后会在根目录下帮我们生成一个stats.json文件。
这个json文件包含了打包后的每个文件的很多信息。

第二步：
在https://webpack.github.io/analyse/上，上传刚才生成的stats.json文件。就可以直观地看到打包后的文件分析。

方案二：webpack-bundle-analyzer

这是目前社区支持的方案中最常用的一种。以插件的形式帮助我们打开一个8888端口上的服务，我们可以在本地服务上直接的看到每个包的大小。

安装：

npm install webpack-bundle-analyzer -D

使用：

//webpack.config.js  
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");  
plugins: [  
  new BundleAnalyzerPlugin()  
]

可视化结果：