vue-cli+webpack4项目打包速度优化

优化前构建速度大约178s左右

分析工具

speed-measure-webpack-plugin

通过smp输出的分析可以清楚的了解到webpack构建过程中，每一阶段的loader以及plugin的工作花费的时间。

使用： yarn add -D speed-measure-webpack-plugin

const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');

const smp = new SpeedMeasurePlugin();

configureWebpack: smp.wrap({}）

缩小文件检索解析范围

为避免无用的检索与递归遍历，可以使用alias指定引用时候的模块，noParse，对不依赖本地代码的第三方依赖不进行解析。

// 定义getAliasPath方法，把相对路径转换成绝对路径

const getAliasPath = dir => join(__dirname, dir)
module.exports = {
	 
  chainWebpack: config => {
    // 添加别名
    config.resolve.alias
      .set('@', getAliasPath('src'))
      .set('assets', getAliasPath('src/assets'))
      .set('utils', getAliasPath('src/utils'))
      .set('views', getAliasPath('src/views'))
      .set('components', getAliasPath('src/components'))
	}
  
}

splitChunks 分割代码

split-chunks-plugin webpack

• chunks: 表示哪些代码需要优化，有三个可选值：initial(初始块)、async(按需加载块)、all(全部块)，默认为async

• minSize: 表示在压缩前的最小模块大小，默认为30000

• minChunks: 表示被引用次数，默认为1

• maxAsyncRequests: 按需加载时候最大的并行请求数，默认为5

• maxInitialRequests: 一个入口最大的并行请求数，默认为3

• automaticNameDelimiter: 命名连接符

• name: 拆分出来块的名字，默认由块名和hash值自动生成

• cacheGroups: 缓存组。缓存组的属性除上面所有属性外，还有test, priority, reuseExistingChunk

  • test: 用于控制哪些模块被这个缓存组匹配到

  • priority: 缓存组打包的先后优先级

  • reuseExistingChunk: 如果当前代码块包含的模块已经有了，就不在产生一个新的代码块

 optimization: {
      runtimeChunk: 'single',
      splitChunks: {
        chunks: 'all', // 表示哪些代码需要优化，有三个可选值：initial(初始块)、async(按需加载块)、all(全部块)，默认为async
        maxInitialRequests: Infinity, // 按需加载时候最大的并行请求数，默认为5
        minSize: 30000, // 依赖包超过300000bit将被单独打包
        // 缓存组
        // priority: 缓存组打包的先后优先级
        // minChunks: 表示被引用次数，默认为1
        cacheGroups: {
          //公共模块
          commons: {
            name: 'chunk-commons',
            test: getAliasPath('src'), // can customize your rules
            minSize: 100, //大小超过100个字节
            minChunks: 3, //  minimum common number
            priority: 5,
            reuseExistingChunk: true,
          },
          // 第三方库
          libs: {
            name: 'chunk-libs',
            test: /[\\/]node_modules[\\/]/,
            priority: 10,
            chunks: 'initial', // only package third parties that are initially dependent
            reuseExistingChunk: true,
            enforce: true,
          },
          echarts: {
            name: 'chunk-echarts',
            test: /[\\/]node_modules[\\/]echarts[\\/]/,
            chunks: 'all',
            priority: 12,
            reuseExistingChunk: true,
            enforce: true,
          },
        },
      },
    },

compression-webpack-plugin gzip打包

 chainWebpack: config => {
    
    config
      .plugin('CompressionWebpackPlugin')
      .use(require('compression-webpack-plugin'), [
        {
          filename: '[path].gz[query]',
          algorithm: 'gzip',
          test: new RegExp('\\.(js|json|css)$'),
          threshold: 10240, // 资源文件大于10240B=10kB时会被压缩
          minRatio: 0.8, // 最小压缩比达到0.8时才会被压缩
          // deleteOriginalAssets: true // 删除原文件
        },
      ])
      .end();
    // if prod is on
    // assets require on cdn
  },

happypack

const HappyPack = require('happypack');
const os = require('os');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
 configureWebpack:  smp.wrap({
  plugins: [
      

      new HappyPack({
        id: 'happybabel',
        loaders: ['babel-loader'],
        threadPool: happyThreadPool,
      }),
      
    ],
    })

总结

这次优化主要是针对打包速度的优化，大概提高打包速度20%，后续还好继续再打包体积上面进行优化。