Detection tools for Webpack

  1. Each plug-in and loader execution speed detection: www.npmjs.com/package/spe… (link)

Update on March 17, 2019: This plugin does not apply to webpack5 and above, the progress-bar-webpack-plugin can be used as an alternative.

// npm i -D speed-measure-webpack-plugin
const SpeedMeasureWebpackPlugin = require('speed-measure-webpack-plugin')
const SpeedMeasure = new SpeedMeasureWebpackPlugin() // Get the execution speed of each loader
module.exports = SpeedMeasure.wrap({
    entry: '... '.output: '... '. })Copy the code

  1. Monitoring resources volume change (compared to the last time) : www.npmjs.com/package/siz…
// npm i -D size-plugin
// webpack.config.js
+ const SizePlugin = require('size-plugin');
 
module.exports = {
  plugins: [+new SizePlugin()
  ]
}
Copy the code

  1. Obtain the proportion of each resource size after packaging:www.npmjs.com/package/web…
    1. It’s easy to find packages that are too big, like loadsh, and then think about alternatives or code splitting
    2. Personal experience
      • A common component in the internal common component library adds BRACE (which makes an online code editor), and the result is a mix of languages that add up to 8M. Solution: Only introduce the parts required by the business, such as SQL, JS, etc
// npm install -D webpack-bundle-analyzer
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

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