在Vue中使用HappyPack

在Vue中使用HappyPack

1、介绍HappyPack

由于有大量文件需要解析和处理，构建是文件读写和计算密集型的操作，特别是当文件数量变多后，Webpack 构建慢的问题会显得严重。 运行在 Node.js 之上的 Webpack 是单线程模型的，也就是说 Webpack 需要处理的任务需要一件件挨着做，不能多个事情一起做。

文件读写和计算操作是无法避免的，那能不能让 Webpack 同一时刻处理多个任务，发挥多核 CPU 电脑的威力，以提升构建速度呢？

HappyPack 就能让 Webpack 做到这点，它把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。

安装HappyPack

// 也可以使用 cnpm 切记下载的时候 happypack 得是小写
npm install --save-dev happypack
npm i -D happypack

2、引入HappyPack

这个文章主要讲的是Vue中使用，HappyPack 如果是React 或者其他的 我也不知道。
1.首先的我们要引入到webpack.conf.js 或者是 webpack.base.conf.js 这个文件当中

// 引入 Happpack 可以在 package.json 找到你下载的
const HappyPack = require('happypack');
// 安装 OS 模块 这个主要是拿到当前电脑的CPU核数
const os = require('os');
/*
    这个是设置共享线程池中的数量
    size 控制设置数量 类型 只能是 整数类型
*/
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

代码中注释掉的为原来的写法

/*
1.在vue模板这个loader中 使用的是 ‘vue-loader‘，但是使用了HappyPack 就要在vue这个HappyPack中定义一个ID值来找到就像 向下面写的 loader: ‘happypack/loader?id=vue’ JS 同理
  当你在使用了HappyPack 时千万不要在 原来的里面设置options 要在Happypack中设置 optioons 切记。我的vueLoaderConfig 这个是我自己配置的，这边没做展示，下面有详细的写法。
  当你的Vue 文件不多时，Vue的可以不用设置 效果不大。
2. 在js的HappyPack 中使用的babel-loader 和Vue的不一样。
3. 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 目录，将会降级回退到操作系统默认的临时文件目录。
4. cache 默认值为 false ， 这个变量在HappyPack 升级到 3.0 或者更高的版本之后就取消这个变量，这个只是我在查文档是看到的就写上试了一下， 状态设置为 true 是 build 就会出现警告。
*/

下面的是修改后的写法

module.exports = {
  context: ...,
  entry: {...},
  output: {...},
  resolve: {...},
  module: {
    rules: [
      // { // 原版
      //   test: /\.vue$/,
      //   loader: 'vue-loader',
      //   options: vueLoaderConfig,
      // },
      {
        test: /\.vue$/,
        loader: 'happypack/loader?id=vue',
        // options: vueLoaderConfig,
        include: [resolve('src')],
        exclude: /node_modules/,
      },
      // { // 原版
      //   test: /\.js$/,
      //   loader: 'babel-loaderl',
      //   include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')],
      // },
      {
        test: /\.js$/,
        loader: 'happypack/loader?id=happyBabel',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')],
        // include: [resolve('src')],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HappyPack({
        //用id来标识 happypack处理那里类文件
      id: 'happyBabel',
      //如何处理  用法和loader 的配置一样
      // cache: false,
      loaders: [{
        loader: 'babel-loader?cacheDirectory=true',
        // loader: 'babel-loader',
      }],
      //共享进程池
      threadPool: happyThreadPool,
      //允许 HappyPack 输出日志
      // verbose: true,
    }),
    new HappyPack({
      id: 'vue',
      cache: false,
      loaders: [{
        loader: 'vue-loader',
        options:vueLoaderConfig 
      }],
      threadPool: happyThreadPool
    }),
  ],
  node: {...}
}