24_webpack_打包分析

一、打包时间的分析

如果我们希望看到每一个loader和plugin消耗的打包时间，可以借助于一个插件：speed-measure-webpakc-plugin

安装：npm i speed-measure-webpack-plugin -D

使用：

// 测量打包时间的插件
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();

module.exports = function (env) {
  isProduction = env.production;
  process.env.NODE_ENV = isProduction ? "production" : "development";
  return smp.wrap(
    isProduction
      ? merge(commonConfig, prodConfig)
      : merge(commonConfig, devConfig)
  );
};

这个插件是有兼容性问题的

如 mini-css-extract-webpack-plugin

怎么解决这个问题？npm i mini-css-extract-webpack-plugin@1.3.6

那么再次npm run build 的时候就可以看到每个插件、loader耗时是多少

二、打包后文件分析

在package.json中的scripts中加入一个脚本
"stats":"webpack --config ./config/webpack.common.js --env production --profile --json=stats"

将打包后的文件生成一个档案，以json格式生成，名字叫stats

通过指向npm run stats可以得到一个stats.json的文件
但是单单阅读这个文件其中的信息并不是显而易见

可以放到：http://webpack.github.io/analyse，进行分析

或者使用webpack-bundle-analyzer

npm i webpack-bundle-analyzer -D

// 打包大小分析的插件
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");

plugins:[
new BundleAnalyzerPlugin()
]

当你npm run build 的时候，它会自动打开一个本地服务