webpack4.x
- webpack-bundle-analyzer
自动计算出各个模块在项目工程中的依赖与分布情况,npm run build之后会自动 打开分析页面
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
configureWebpack: {
plugins: [ new BundleAnalyzerPlugin()]
}
同类型的还有 webpack-chart 以及 webpack-analyse
- speed-measure-webpack-plugin
它分析 webpack 的总打包耗时以及每个 plugin 和 loader 的打包耗时,从而让我们对打包时间较长的部分进行针对性优化
npm install -D speed-measure-webpack-plugin
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
module.exports = smp.wrap({
// 项目中的plugins和loader
plugins: [
// ...
],
module: {
// ...
}
});