Webpack性能优化「六」-- 优化打包构建速度 ***

本篇讲的是 Webpack 对于优化打包构建速度，也就是对于开发体验和效率的优化。
有如下几处可以优化：

优化 babel-loader
IgnorePlugin 避免引入无用模块
noParse 避免重复打包
happyPack //多进程打包工具
ParalleUglifyPlugin //多进程打包压缩
自动刷新
热更新
DLLPlugin

1.优化 babel-loader

在babel-loader后加cacheDirectory，开启缓存，
没有改动的es6代码会启用缓存，不会重新编译

[webpack.dev.js]:

module: {
  rules: [{
      test: /\.js$/,
      loader: ['babel-loader?cacheDirectory'],
      include: srcPath,
      exclude: /node_modules/
    },
  ]
},

2.IgnorePlugin 避免引入无用模块

使用场景：
日期处理类库moment中，包含很多种语言，默认引入所有语言的JS代码，代码体积过大；只需要使用中文，那就需要配置忽略对整个类库的引入，手动按需引入中文。

当全部引入配置

[index.js]配置

import moment from 'moment' //全部引入
moment.locale('zh-cn') //设置语言为中文

当按需引入配置

① 忽略 moment 引用的所有语言包，忽略 moment 下的 /locale 目录
[webpack.prod.js]配置：

plugins: [
  // 忽略 moment 下的 /locale 目录
  new webpack.IgnorePlugin(/\.\/locale/, /moment/),
]

② 手动动态引入中文语言
[index.js]：

import moment from 'moment' // moment的引入被忽略
import 'moment/locale/zh-cn' //手动引入中文语言包

综上，IgnorePlugin 避免引入无用模块，减少了打包体积，提升了打包速度。

3.noParse 避免重复打包

像vue.min.js已经模块化处理过了，需要忽略对此类型文件的打包。

webpack.prod.js：

rules: [{
  test: /\.vue$/,
  loader: ['vue-loader'],
  include: srcPath
}, ]