webpack的检测工具

1. 各个插件和loader执行速度的检测： www.npmjs.com/package/spe…

// npm i -D speed-measure-webpack-plugin
const SpeedMeasureWebpackPlugin = require('speed-measure-webpack-plugin')
const SpeedMeasure = new SpeedMeasureWebpackPlugin() // 拿到各loader执行速度
module.exports = SpeedMeasure.wrap({
    entry: '...',
    output: '...',
	  ...
})

2. 监控资源体积变化（与上一次相比）： www.npmjs.com/package/siz…

// npm i -D size-plugin
// webpack.config.js
+ const SizePlugin = require('size-plugin');
 
module.exports = {
  plugins: [
+    new SizePlugin()
  ]
}

3. 获取打包后，各个资源大小占比情况：https://www.npmjs.com/package/webpack-bundle-analyzer
   1. 可以很轻易的找出一些过大的包，比如loadsh，然后在考虑是否有替代方案或者code splitting
   2. 个人经历
      • 内部公共组件库内 的一个公共组件加了brace（功能是做一个在线代码编辑器），结果包含了各种语言，总的加起来有8M。解决方法：只引入业务需要的部分，比如sql，js等

// npm install -D webpack-bundle-analyzer
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}