webpack性能优化之在开发阶段优化打包构建速度

开发时每做一次修改，很快就能编译完、构建好。这就是优化打包构建速度，提高开发体验和效率。

1、优化babel-loader

babel编译es6到es5还是消耗比较多的。

1. 开启缓存
   加了一个?cacheDirectory参数
   只要是es6代码没有改的，启用缓存，就不会再重新编译
2. 明确范围
   通过include或exclude来确定范围，一般include和exclude两个中只写一个就可以了。

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

2、IgnorePlugin

3、noParse

4、happyPack

多进程打包工具
JS是单线程的，开启多进程打包；
对于多核cpu，提高构建速度

1、首先需要安装happypack

然后引用进来

const HappyPack = require('happypack')

2、更改babel-loader写法

更改babel-loader这个loader的写法，
把对 .js 文件的处理转交给 id 为 babel 的 HappyPack 实例

  {
                test: /\.js$/,
                use: ['happypack/loader?id=babel'],
                include: srcPath,
                // exclude: /node_modules/
            },

那么 id 为 babel 的 HappyPack 实例在哪里呢

3、增加插件

new一个 happyPack实例， 开启多进程打包
为它定义一个唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件，在第二步中使用这个id；
如何处理 .js 文件，用法和 Loader 配置中一样。

plugins: [
        new HappyPack({
            id: 'babel',
            loaders: ['babel-loader?cacheDirectory']
        }),
]

5、ParalleIUglifyPlugin

用来开启多进程，压缩JS代码

1、首先安装插件webpack-parallel-uglify-plugin

然后引用

const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')

2、使用

没有其它配置，在plugins中new一个插件实例
new这个插件的时候传入配置对象。

plugins: [
 new ParallelUglifyPlugin({
            // 传递给 UglifyJS 的参数
            // （还是使用 UglifyJS 压缩，只不过帮助开启了多进程）
            uglifyJS: {
                output: {
                    beautify: false, // 最紧凑的输出
                    comments: false, // 删除所有的注释
                },
                compress: {
                    // 删除所有的 `console` 语句，可以兼容ie浏览器
                    drop_console: true,
                    // 内嵌定义了但是只用到一次的变量
                    collapse_vars: true,
                    // 提取出出现多次但是没有定义成变量去引用的静态值
                    reduce_vars: true,
                }
            }
        })
]

注：

1. happypack可以放在开发阶段使用，也可以放在生成阶段使用。
   而ParallelUglifyPlugin只能放在生成阶段使用了，因为开发阶段没有必要去做代码的压缩。
2. 如果项目较大，打包较慢，开启多进程能提高速度。
3. 如果项目较小，打包本来就很快，开启多进程会降低速度，因为进程开销。这种情况就不要启动多进程打包。

6、自动刷新

自动刷新是针对开发环境而言的。生成环境没有自动刷新。
代码改完之后一保存，浏览器会自动刷新。不用自己刷新浏览器。
使用devServer会默认开启自动刷新
devServer项与plugins平级

7、热更新

热更新也是针对开发环境而言的。
自动刷新与热更新的区别：
自动刷新是：

1. 整个网页全部刷新，速度较慢
2. 整个网页全部刷新，状态会丢失。

热更新：
新代码生效，网页不刷新，状态不丢失。

使用热更新

1、引用包（不需要安装）

const HotModuleReplacementPlugin = require('webpack/lib/HotModuleReplacementPlugin');

2、配置入口

原来是直接引入index.js入口文件地址。
使用热更新，index是一个数组，最后一项才是index文件地址

    entry: {
        index: [
            'webpack-dev-server/client?http://localhost:8080/',
            'webpack/hot/dev-server',
            path.join(srcPath, 'index.js')
        ],
    },

3、new一个插件实例

plugins: [
 new HotModuleReplacementPlugin()
]

4、配置devServer

在devServer中，将hot配置为true

 devServer: {
 hot: true,
}

5、设置模块监听范围（监听哪些模块）

1. module.hot为true，说明在webpack中配置了热更新
2. module.hot.accept方法，第一个参数，数组，允许哪些模块进行热更新的监听，只有当这些模块发生变化时才热更新，不在监听范围内的就不是热更新。
3. 第二个参数，被监听的模块发生改变后的回调函数

if (module.hot) {
    module.hot.accept(['./math'], () => {
       
    })
}

8、DllPlugin

针对一些比较大的第三方插件，没有必要每次构建的时候都构建一遍，可以事先把这些第三方库打包好之后，做一个dll然后来引用它。