【前端优化】使用speed-measure-webpack-plugin分析前端运行、打包耗时，优化项目

记录下

项目安装speed-measure-webpack-plugin

打包分析：

修改vue.config.js文件
speed-measure-webpack-plugin进行构建速度分析，需要包裹整个 configureWebpack 配置

const originalConfig = {publicPath: '/',assetsDir: 'assets',parallel: true,devServer: {hot: true},lintOnSave: false,runtimeCompiler: true,chainWebpack: (config) => {config.resolve.alias.set('@', resolve('src')).set('@views', resolve('src/views')).set('@comp', resolve('src/components')).set('@root', resolve('/'))config.module.rule('images').test(/\.(png|jpe?g|gif|svg)(\?.*)?$/).type('asset').parser({dataUrlCondition: {maxSize: 8 * 1024 // 8KB以下转base64 //2560}})//   .set('generator', {//     filename: 'img/[name].[hash:8][ext]'//   })config.module.rule('images').use('image-webpack-loader').loader('image-webpack-loader').options({bypassOnDebug: true}).end()},configureWebpack: {cache: {type: 'filesystem', // 使用文件缓存buildDependencies: {config: [__filename] // 缓存依赖},allowCollectingMemory: true,maxMemoryGenerations: 1},optimization: {minimizer: minimizer,removeEmptyChunks: process.env.NODE_ENV === 'production',splitChunks: splitChunks},plugins: plugins,module: {noParse: /jquery/,rules: [{test: /\.js$/,include: path.resolve(__dirname, 'src'),exclude: /node_modules/,use: [{loader: 'thread-loader',options: {workers: cpuCount,workerParallelJobs: 20,workerNodeArgs: ['--max-old-space-size=1024'] // 限制子进程内存// poolTimeout: 2000 // 空闲时自动关闭}},{loader: 'babel-loader',options: {babelrc: true,cacheDirectory: true}}]}]}},css: {loaderOptions: {// You need to configure a global variable if you want to use it in a componentscss: {additionalData: '@import "~@/assets/css/variables.scss";'}}},// 设为false打包时不生成.map文件productionSourceMap: false
}
module.exports = {...originalConfig,configureWebpack: smp.wrap(originalConfig.configureWebpack)
}

npm run dev运行，获取分析：

SMP  ⏱
General output time took 7 mins, 42.001 secsSMP  ⏱  Plugins
DefinePlugin took 0 secs
TerserPlugin took 0 secsSMP  ⏱  Loaders
@vue/vue-loader-v15, and
mini-css-extract-plugin, and
css-loader, and
postcss-loader, and
sass-loader, and
@vue/vue-loader-v15 took 4 mins, 58.75 secsmodule count = 2340
css-loader, and
@vue/vue-loader-v15, and
postcss-loader, and
sass-loader, and
@vue/vue-loader-v15 took 4 mins, 53.93 secsmodule count = 1170
@vue/vue-loader-v15, and
thread-loader, and
babel-loader, and
thread-loader, and
babel-loader, and
@vue/vue-loader-v15 took 3 mins, 22.91 secsmodule count = 3430
mini-css-extract-plugin, and
css-loader, and
postcss-loader took 2 mins, 41.67 secsmodule count = 21
thread-loader, and
babel-loader, and
thread-loader, and
babel-loader took 2 mins, 33.61 secsmodule count = 404
mini-css-extract-plugin, and
css-loader, and
postcss-loader, and
sass-loader took 2 mins, 12.24 secsmodule count = 4
modules with no loaders took 2 mins, 2.27 secsmodule count = 2244
image-webpack-loader took 1 min, 36.096 secsmodule count = 327
@vue/vue-loader-v15 took 1 min, 31.51 secsmodule count = 5127
css-loader, and
postcss-loader took 1 min, 13.14 secsmodule count = 21
css-loader, and
postcss-loader, and
sass-loader took 50.62 secsmodule count = 4
@vue/vue-loader-v15, and
mini-css-extract-plugin, and
css-loader, and
postcss-loader, and
@vue/vue-loader-v15 took 49.91 secsmodule count = 6
css-loader, and
@vue/vue-loader-v15, and
postcss-loader, and
@vue/vue-loader-v15 took 15.11 secsmodule count = 3
html-webpack-plugin took 1.9 secsmodule count = 1
raw-loader took 0.819 secsmodule count = 1
script-loader took 0.032 secsmodule count = 1

修改配置

1.图片处理仅在生产环境使用

    if (process.env.NODE_ENV === 'production') {config.module.rule('images').test(/\.(png|jpe?g|gif|svg)(\?.*)?$/).type('asset').parser({dataUrlCondition: {maxSize: 8 * 1024 // 8KB以下转base64 //2560}})//   .set('generator', {//     filename: 'img/[name].[hash:8][ext]'//   })config.module.rule('images').use('image-webpack-loader').loader('image-webpack-loader').options({bypassOnDebug: true}).end()} else {config.module.rule('images').uses.delete('image-webpack-loader') // 移除图像压缩}

2. scss设置

  css: {loaderOptions: {// You need to configure a global variable if you want to use it in a componentscss: {implementation: require('sass'),additionalData: '@import "~@/assets/css/variables.scss";'}}},

3. 改用esbuild-loader，用了之后是要快一点，但这个速度感觉还是不对啊

// 删除原有的babel-loader配置config.module.rules.delete('js')// 添加esbuild-loaderconfig.module.rule('js').test(/\.(js|mjs|jsx)$/)// .exclude.add(/node_modules/)// .end().use('esbuild-loader').loader('esbuild-loader').options({target: 'es2015',loader: 'jsx'})

thread-loader, and 
babel-loader took 1 min, 23.34 secsmodule count = 374
-------
esbuild-loader took 52.51 secsmodule count = 395

再次优化后，打包速度提升：

 SMP  ⏱  
General output time took 4 mins, 5.18 secsSMP  ⏱  Plugins
DefinePlugin took 0.002 secsSMP  ⏱  Loaders
css-loader, and 
@vue/vue-loader-v15, and 
postcss-loader, and 
sass-loader, and 
@vue/vue-loader-v15 took 3 mins, 16.68 secsmodule count = 1170
@vue/vue-loader-v15 took 2 mins, 11.74 secsmodule count = 5127
@vue/vue-loader-v15, and 
esbuild-loader, and 
@vue/vue-loader-v15 took 1 min, 50.85 secsmodule count = 3430
modules with no loaders took 1 min, 27.56 secsmodule count = 2609
css-loader, and 
postcss-loader took 1 min, 11.28 secsmodule count = 21
css-loader, and 
postcss-loader, and 
sass-loader took 1 min, 8.42 secsmodule count = 4
esbuild-loader took 52.51 secsmodule count = 395
css-loader, and 
@vue/vue-loader-v15, and 
postcss-loader, and 
@vue/vue-loader-v15 took 8.85 secsmodule count = 3
@vue/vue-loader-v15, and 
vue-style-loader, and 
css-loader, and 
postcss-loader, and 
sass-loader, and 
@vue/vue-loader-v15 took 2.93 secsmodule count = 2340
vue-style-loader, and 
css-loader, and 
postcss-loader took 0.373 secsmodule count = 21
vue-style-loader, and 
css-loader, and 
postcss-loader, and 
sass-loader took 0.197 secsmodule count = 4
html-webpack-plugin took 0.141 secsmodule count = 1
@vue/vue-loader-v15, and 
vue-style-loader, and 
css-loader, and 
postcss-loader, and 
@vue/vue-loader-v15 took 0.016 secsmodule count = 6

但CSS相关加载器耗时还是非常长，没搜到怎么优化。。。。

webpack5新增了一个懒加载属性 lazyCompilation， 还可以使用 DllPlugin 进行分包，都能提升运行速度； 后面看看