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

记录下

项目安装speed-measure-webpack-plugin

打包分析：

修改vue.config.js文件

speed-measure-webpack-plugin进行构建速度分析，需要包裹整个 configureWebpack 配置

bash 复制代码

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 component
      scss: {
        additionalData: '@import "~@/assets/css/variables.scss";'
      }
    }
  },
  // 设为false打包时不生成.map文件
  productionSourceMap: false
}
module.exports = {
  ...originalConfig,
  configureWebpack: smp.wrap(originalConfig.configureWebpack)
}

npm run dev运行，获取分析：

bash 复制代码

SMP  ⏱
General output time took 7 mins, 42.001 secs

 SMP  ⏱  Plugins
DefinePlugin took 0 secs
TerserPlugin took 0 secs

 SMP  ⏱  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 secs
  module 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 secs
  module 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 secs
  module count = 3430
mini-css-extract-plugin, and
css-loader, and
postcss-loader took 2 mins, 41.67 secs
  module count = 21
thread-loader, and
babel-loader, and
thread-loader, and
babel-loader took 2 mins, 33.61 secs
  module count = 404
mini-css-extract-plugin, and
css-loader, and
postcss-loader, and
sass-loader took 2 mins, 12.24 secs
  module count = 4
modules with no loaders took 2 mins, 2.27 secs
  module count = 2244
image-webpack-loader took 1 min, 36.096 secs
  module count = 327
@vue/vue-loader-v15 took 1 min, 31.51 secs
  module count = 5127
css-loader, and
postcss-loader took 1 min, 13.14 secs
  module count = 21
css-loader, and
postcss-loader, and
sass-loader took 50.62 secs
  module 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 secs
  module count = 6
css-loader, and
@vue/vue-loader-v15, and
postcss-loader, and
@vue/vue-loader-v15 took 15.11 secs
  module count = 3
html-webpack-plugin took 1.9 secs
  module count = 1
raw-loader took 0.819 secs
  module count = 1
script-loader took 0.032 secs
  module count = 1

修改配置

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

bash 复制代码

    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') // 移除图像压缩
    }

scss设置

bash 复制代码

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

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

bash 复制代码

// 删除原有的babel-loader配置
    config.module.rules.delete('js')

    // 添加esbuild-loader
    config.module
      .rule('js')
      .test(/\.(js|mjs|jsx)$/)
      // .exclude.add(/node_modules/)
      // .end()
      .use('esbuild-loader')
      .loader('esbuild-loader')
      .options({
        target: 'es2015',
        loader: 'jsx'
      })

bash 复制代码

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

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

bash 复制代码

 SMP  ⏱  
General output time took 4 mins, 5.18 secs

 SMP  ⏱  Plugins
DefinePlugin took 0.002 secs

 SMP  ⏱  Loaders
css-loader, and 
@vue/vue-loader-v15, and 
postcss-loader, and 
sass-loader, and 
@vue/vue-loader-v15 took 3 mins, 16.68 secs
  module count = 1170
@vue/vue-loader-v15 took 2 mins, 11.74 secs
  module count = 5127
@vue/vue-loader-v15, and 
esbuild-loader, and 
@vue/vue-loader-v15 took 1 min, 50.85 secs
  module count = 3430
modules with no loaders took 1 min, 27.56 secs
  module count = 2609
css-loader, and 
postcss-loader took 1 min, 11.28 secs
  module count = 21
css-loader, and 
postcss-loader, and 
sass-loader took 1 min, 8.42 secs
  module count = 4
esbuild-loader took 52.51 secs
  module count = 395
css-loader, and 
@vue/vue-loader-v15, and 
postcss-loader, and 
@vue/vue-loader-v15 took 8.85 secs
  module 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 secs
  module count = 2340
vue-style-loader, and 
css-loader, and 
postcss-loader took 0.373 secs
  module count = 21
vue-style-loader, and 
css-loader, and 
postcss-loader, and 
sass-loader took 0.197 secs
  module count = 4
html-webpack-plugin took 0.141 secs
  module count = 1
@vue/vue-loader-v15, and 
vue-style-loader, and 
css-loader, and 
postcss-loader, and 
@vue/vue-loader-v15 took 0.016 secs
  module count = 6

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

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