Webpack-优化

[PleaseStartYourPerformance]

BundleAnalyzerPlugin

分析资源大小

SpeedMeasurePlugin

分析每个步骤花费的时间
优化工具

hard-source-webpack-plugin

可以看到，启用这个插件后，loader不占用1s编译时间。因为上次所有的编译内容都被缓存了，新的编译只需要做增量编译即可，不需要重复编译。

安装

npm install --save-dev hard-source-webpack-plugin
# or
yarn add --dev hard-source-webpack-plugin

配置

// webpack.config.js
var HardSourceWebpackPlugin = require('hard-source-webpack-plugin');

module.exports = {
  context: // ...
  entry: // ...
  output: // ...
  plugins: [
    new HardSourceWebpackPlugin()
  ]
}

HardSourceWebpackPlugin 和 speed-measure-webpack-plugin 不能一起使用

原文链接

https://juejin.im/post/6887863430510968839?utm_source=gold_browser_extension