webpack4性能优化

2023-02-07 本文已影响0人 holidayPenguin

优化手段介绍

speed-measure-webpack-plugin：在打包的过程中，能够精确的帮你分析出每一个步骤耗费的时间，然后我们可以针对时间比较长的部分专门做优化。
babel-loader 的 cacheDirectory：将转译的结果缓存到文件系统中
eslint-loader 的 cache：
cache-loader：对sass-loader、postcss-loader、vue-loader做打包缓存，缩短打包的时间。
happypack：可以在打包的时候开启多线程打包
webpack-parallel-uglify-plugin：UglifyJsPlugin这个包的打包时间太长，可以使用webpack-parallel-uglify-plugin，开启多核同步压缩增加压缩的效率。
hard-source-webpack-plugin：为模块提供中间缓存步骤

总之，最有用的还是webpack的 terser-webpack-plugin 缓存、babel-loader 的 cacheDirectory、eslint-loader 的 cache，cache-loader也会有作用，happypack、`webpack-parallel-uglify-plugin``基本没啥用

开始

初始启动

项目第一次启动需要耗时40s左右，第二次启动耗时30s左右，这是因为webpack的 terser-webpack-plugin 缓起作用

babel-loader 的 cacheDirectory` 和 eslint-loader 的 cache

然后开启babel-loader 的 cacheDirectory 和 eslint-loader 的 cache，初次启动耗时增加了几秒（猜测可能在创建缓存），再次启动耗时在15s左右

babel-loader 会将转译的结果缓存到文件系统中。cacheDirectory 默认值为 false。当有设置时，指定的目录将用来缓存 loader 的执行结果。之后的 webpack 构建，将会尝试读取缓存，来避免在每次执行时，可能产生的、高性能消耗的 Babel 重新编译过程(recompilation process)。如果设置了一个空值 (loader: 'babel-loader?cacheDirectory')或者 true (loader: 'babel-loader?cacheDirectory=true')，loader 将使用默认的缓存目录node_modules/.cache/babel-loader，如果在任何根目录下都没有找到 node_modules 目录，将会降级回退到操作系统默认的临时文件目录。

{
  test: /\.js$/,
  loader: 'babel-loader?cacheDirectory=true',
  include: [resolve('src'), resolve('test'), resolve('config'), resolve('node_modules/webpack-dev-server/client')],
},

eslint-loader开启缓存

{
  test: /\.(js|vue)$/,
  enforce: 'pre',
  include: [resolve('src')],
  loader: 'eslint-loader',
  options: {
    formatter: require('eslint-friendly-formatter'),
    emitWarning: true,
    cache: true,
  },
},

cache-loader

再启用 cache-loader，初次启动耗时增加了几秒，再次启动耗时11.5s

const cacheLoader = {
  loader: 'cache-loader'
}

{
  test: /\.vue$/,
  use: [
    cacheLoader,
    {
      loader: 'vue-loader',
      options: vueLoaderConfig
    }
  ]
},

const loaders = options.usePostCSS ? [cacheLoader, cssLoader, postcssLoader] : [cacheLoader, cssLoader]

happypack

开启多线程 happypack，并未提升速度，而且时间还增加了，不知道是不是我没全部使用多线程的原因。

4-3 使用 HappyPack · 深入浅出 Webpack (wuhaolin.cn)

将常用的 loader 替换为 happypack/loader?id=xxxx，并使用 id 指定创建的 HappyPack 插件

const HappyPack = require('happypack');

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        // 把对 .js 文件的处理转交给 id 为 babel 的 HappyPack 实例
        use: ['happypack/loader?id=babel'],
        // 排除 node_modules 目录下的文件，node_modules 目录下的文件都是采用的 ES5 语法，没必要再通过 Babel 去转换
        exclude: path.resolve(__dirname, 'node_modules'),
      },
    ]
  },
  plugins: [
    new HappyPack({
      // 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件
      id: 'babel',
      // 如何处理 .js 文件，用法和 Loader 配置中一样
      loaders: ['babel-loader?cacheDirectory'],
      // ... 其它配置项
    }),
  ],
};

webpack-parallel-uglify-plugin

webpack-parallel-uglify-plugin 没有试，不确定

hard-source-webpack-plugin

文档：hard-source-webpack-plugin · GitCode

hard-source-webpack-plugin 在另外一个飞冰的项目中使用，编译一两分钟的项目节省了10s钟，并且和 speed-measure-webpack-plugin 不能一起使用

npm install --save-dev hard-source-webpack-plugin or yarn add --dev hard-source-webpack-plugin

var HardSourceWebpackPlugin = require('hard-source-webpack-plugin');

module.exports = {
  context: // ...
  entry: // ...
  output: // ...
  plugins: [
    new HardSourceWebpackPlugin()
  ]
}

总结

webpack的 terser-webpack-plugin 缓存、babel-loader 的 cacheDirectory、eslint-loader 的 cache，cache-loader都会有作用，40s多的项目耗时减少了30s