webpack打包vue反编译_前端性能优化——webpack篇

相信每个用过webpack的同学都对“打包”和“压缩”这样的事情烂熟于心，这些老生常谈的特性，我更推荐大家去阅读文档。本文将把注意力放在webpack的性能优化上。

一、提高构建速度

1. 给 loader 减轻负担

用 include 或 exclude 来帮我们避免不必要的转译

module: {
     
  rules: [
    {
     
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
     
        loader: 'babel-loader',
        options: {
     
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

开启缓存将转译结果缓存至文件系统

loader: 'babel-loader?cacheDirectory=true'

2. 使用 Happypack 将 loader 由单进程转为多进程

webpack 的缺点是单线程的，我们可以使用 Happypack 把任务分解给多个子进程去并发执行，大大提升打包效率。配置的方法是把 loader 的配置转移到 HappyPack 中去。

const HappyPack = require('happypack')
// 手动创建进程池
const happyThreadPool =  HappyPack.ThreadPool({ size: os.cpus().length })

module.exports = {
     
  module: {
     
    rules: [
      ...
      {
     
        test: /\.js$/,
        // 问号后面的查询参数指定了处理这类文件的HappyPack实例的名字
        loader: 'happypack/loader?id=happyBabel',
        ...
      },
    ],
  },
  plugins: [
    ...
    new HappyPack({
     
      // 这个HappyPack的“名字”就叫做happyBabel，和楼上的查询参数遥相呼应
      id: 'happyBabel',
      // 指定进程池
      threadPool: happyThreadPool,
      loaders: ['babel-loader?cacheDirectory']
    })
  ],
}

3. DllPlugin 提取公用库

开发过程中，我们经常需要引入大量第三方库，这些库并不需要随