提升webpack打包速度

针对version 4.x

1.升级webpack

vue-cli 目前搭建的vue项目生成的webpack版本为3.12.0 【date:2019/10/29】【vue版本为 2.9.6】对目前版本的webpack进行版本升级（选做）

命令:
npm update webpack@4.6.0 【升级webpack】
npm add webpack-dev-server webpack-cli -D【添加 webpack-dev-server 添加 webpack-cli】

2.使用happypack 对babel-laoder进行封装

happyPack 简介

加速原理:运行在nodeJS上的webpack是属于单线程，因此，webpack处理事情的时候需要一步一步来做，不可同时处理多件事情
我们需要webpack在同一时间处理多任务的时候，需要发挥多核cpu电脑的威力，HappyPack 可以把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。

命令：
npm i happypack -d 安装happypack的插件
在vue-cli 生成的webpack.base.js 里输入

const HappyPack = require('happypack')	
const os = require('os') //os 是node 的os模块，引入了一些基本的系统操作函数	
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })//返回一个数组对象， 包含安装的每个cpu的内核的基本信息:型号，速度，时间等

happypack逻辑图

修改webpack.base.js

const HappyPack = require('happypack');
const os = require('os');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,//把对.js 的文件处理交给id为happyBabel 的HappyPack 的实例执行
        loader: 'happypack/loader?id=happyBabel',
        //排除node_modules 目录下的文件
        exclude: /node_modules/
      },
    ]
  },
plugins: [
    new HappyPack({
        //用id来标识 happypack处理那里类文件
      id: 'happyBabel',//与modules中loader的id相同
      //如何处理  用法和loader 的配置一样
      loaders: [{
        loader: 'babel-loader?cacheDirectory=true',//开启缓存
      }],
      //共享进程池
      threadPool: happyThreadPool,
      //允许 HappyPack 输出日志
      verbose: true,
    })
  ]
}

· loader 配置中，将所有文件的处理交给happy/loader处理【例如上述代码中的js代码的编译，原本是通过bable-loader处理，现交给happy/loader 处理，然后通过参数id ，告知使用哪个happy/loader实例】

· 在 Plugin 配置中，新增HappyPack 实例用于告诉 happypack/loader 去如何处理 .js。选项中的 id 属性的值和上面 querystring 中的 ?id=babel 相对应，选项中的 loaders 属性和 Loader 配置中一样。

个人对于happyPack理解：

子进程中对文件的编译仍然是通过原本的loader处理，happyPack的作用在于，开启多个子进程，促使这些loader能在同一时间处理文件

3.js转译，开启缓存

bable-loader 有一项cacheDirectory的配置，默认为false，处于关闭状态，更改为true，开启js转译的缓存

当有设置时，指定的目录将用来缓存 loader 的执行结果。之后的 webpack 构建，将会尝试读取缓存，来避免在每次执行时，可能产生的、高性能消耗的 Babel 重新编译过程(recompilation process)。如果设置了一个空值 (loader: ‘babel-loader?cacheDirectory’) 或者 true (loader: babel-loader?cacheDirectory=true)，loader 将使用默认的缓存目录

以上！！！