webpack性能优化

优化打包构建速度 - 开发体验和效率

• 优化babel-loader
  • 开启缓存，es6代码没有发生改变的部分不会重复打包
  • 明确范围，使用include或exclude

{
   
    test: /\.js$/,
    use: 'babel-loader?cacheDirectory=true', // 开启缓存
    exclude: /node_modules/ // 明确范围
},

---

• ignorePlugin
  避免引入无用模块
  直接不引入，代码中没有
  比如:

// 默认会引入所有语言的js代码，代码过大。
import moment from 'moment';

如何只引入中文？

plugins: [
    // 忽略moment下的/local目录
    new webpack.IgnorePlugin({
   
        resourceRegExp: /^\.\/locale$/,
        contextRegExp: /moment$/
    }),
]

然后手动引用语言包

moment.locale('zh-cn');

---

• noParse
  避免重复打包
  引入，但不打包

module: {
   
    noParse: [/react\.min\.js$/, /vue\.min\.js$/]
},

---

• happyPack
  • JS单线程，开启多进程打包
  • 提高构建速度(特别是多核cpu)

module: {
   
  rules: [
      {
   
          test: /\.js$/,
          // 把对.js文件的处理转交给id为babel的HappyPack实例
          use: ['happypack/loader?id=babel'],
          include: srcPath,
      },
  ],
},
plugins: [
    new happypack({
   
        id: