项目中speed-measure-webpack-plugin进行打包时间分析

1,569 阅读1分钟

项目使用的是vue2+webpack3,随着需求不断的增加,项目变得越来越大,为了查看详细的打包时间,使用了speed-measure-webpack-plugin,具体步骤如下: 在webpack.prod.conf.js文件中:

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
//省略其它代码
module.exports = smp.wrap(webpackConfig);

通过speed-measure-webpack-plugin打包完可以看到以下结果

1671530150580.png

在使用过程中,由于公司项目在build.js中在打包时会输出一些信息,会在打包完看不到 speed-measure-webpack-plugin的结果,将下面代码注释即可

process.stdout.write(stats.toString({
      colors: true,
      modules: false,
      children: false,
      chunks: false,
      chunkModules: false
    }) + '\n\n')