复习webpack4之提高Webpack打包速度的方法

以前学习过webpack3的知识，可是webpack4升级后仍是有不少变更的，因此此次从新整理一下webpack4的知识点，方便之后复习。

此次学习webpack4不只仅要会配置，记住核心API，最好还要理解一下webpack更深层次的知识，好比打包原理等等，因此可能会省略一些比较基础的内容，可是但愿我能够经过这次学习掌握webpack，更好地应对之后的工做。

1.跟上技术的迭代（Node，Npm，Yarn）

若是Node进行了版本更新，性能方面有所提高，webpack运行在node的基础上，性能也会跟着有所提高。

若是更新Npm和Yarn，模块之间遇到相互引用的状况下，新版本的包管理工具可能会更快的帮咱们分析包依赖，作一些包的引用。

2.在尽量少的模块上应用Loader

好比咱们使用babel-loader的时候，不须要对node_modules也进行编译。

exclude: /node_modules/

由于一般来讲，node_modules里面的js一般都被编译过了，咱们再去从新编译一次就会形成浪费。

3.尽量少的使用plugin，而且要保证plugin的可靠性

好比，咱们在打包线上代码时，会压缩css，就会使用optimize-css-assets-webpack-plugin这个插件，可是在开发环境中，咱们不须要压缩css，因此在两个配置文件中，作出不一样的配置。

打包线上代码的配置：

在本地开发配置文件中就能够不加这个plugin。

另外咱们在使用插件时，最好使用社区中验证过，性能比较好的插件。由于有一些我的开发的插件，性能得不到保证，会对打包速度有影响。

4.resolve参数合理配置

4.1 extensions

有时候咱们引入一个文件，想配置成不写文件后缀的引入方式，就须要用到这个配置项。

这样webpack在引入文件时，就会去找后缀名为js和jsx的文件。

可是若是咱们配置了不少类型的文件后缀，那么webpack打包时每次都要重复找这个文件，对性能就会有损耗，因此咱们只把逻辑文件配置在extensions里面。

4.2 mainFiles

如今咱们想引用一个文件夹下的index.js文件，有什么方法让webpack默认引入index.js文件呢

就能够写成

也能够多加配置

就能够写成

可是若是配置特别多，也是会影响到weback打包速度的。

4.3 alias

咱们在写react和vue的时候，经常会配置alias，经过给目录设置别名，webpack打包的时候就能找到目录。

至关于

5.使用DllPlugin提高webpack打包速度

咱们在开发过程当中，不免引入第三方模块（好比lodash），而每次在打包的时候，都会从新去分析每一个引入的包，分析完以后把他们打包到咱们的代码中。其实第三方模块引入后，一般是不会改变的，咱们能够把他们单独打包生成一个文件，只在第一次打包的时候分析他们，之后再打包时直接用分析的结果(实际是把第三方模块打包成文件，经过全局变量输出)。

咱们先在webpack.config.js目录中（若是分环境打包，就在配置文件的目录中），新建一个webapck.dll.js。

假设咱们此次引入了lodash这个第三方模块，那么要在webpack.dll.js中增长配置

而后须要在package.json中增长一个命令。

而后咱们继续完善代码，先安装一个插件

cnpm install add-asset-html-webpack-plugin --save

复制代码

而后在webpack.common.js中引入插件

而后增长使用一个插件，意思是，向html中增长一个资源，这个资源的目录是dll下的vendor.dll.js。

而后咱们启动npm run dev，发现这控制台中输入vendor，会出现一个函数，咱们第一步就达成了，如今须要让咱们的代码使用这个全局变量。

打开webpack.dll.js，增长以下配置。

意思是，要用DLLPlugin分析这个库，这个库就是咱们输出的全局变量。

分析后会生成一个映射关系文件，咱们能够配置文件生成的路径

这样打包出来就会多出一个文件。

而后在webpack.common.js中增长一个插件，帮咱们处理映射关系，而且目录指向咱们生成的json文件，这样他底层就会自动去全局变量中拿vendor。若是映射关系不存在，才会去node_modules中分析代码。

而后进行打包就能看到效果了

使用前

使用后

若是有多个映射关系文件，就要配置多份，也能够写成下面这种形式。

这样node会自动分析dll目录下有几个文件，帮咱们自动去添加两个插件。

6.控制包文件大小

经过Tree Shaking对冗余代码的删除。配置SplitChunksPlugin对大文件进行拆分，拆分红一些小文件。

7.thread-loader，parallel-webpack，happypack 多进程打包

7.1 ParallelUglifyPlugin

ParallelUglifyPlugin能够把对JS文件的串行压缩变为开启多个子进程并行执行

首先安装webpack-parallel-uglify-plugin

cnpm i -D webpack-parallel-uglify-plugin
复制代码

在plugins中配置

new ParallelUglifyPlugin({
    workerCount: 3, //开启几个子进程去并发的执行压缩。默认是当前运行电脑的 CPU 核数减去1
    uglifyJS: {
        output: {
            beautify: false, //不须要格式化
            comments: false, //不保留注释
        },
        compress: {
            warnings: false, // 在UglifyJs删除没有用到的代码时不输出警告
            drop_console: true, // 删除全部的 `console` 语句，能够兼容ie浏览器
            collapse_vars: true, // 内嵌定义了可是只用到一次的变量
            reduce_vars: true, // 提取出出现屡次可是没有定义成变量去引用的静态值
        }
    }
})
复制代码

7.2 HappyPack

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

首先安装happypack

cnpm i happypack@next -D
复制代码

在module中配置：

module: {
    rules: [{
        test: /\.js$/,
        //把对.js文件的处理转交给id为babel的HappyPack实例
        use: 'happypack/loader?id=babel',
        include: path.resolve(__dirname, 'src'),
        exclude: /node_modules/
    }, {
        //把对.css文件的处理转交给id为css的HappyPack实例
        test: /\.css$/,
        use: 'happypack/loader?id=css',
        include: path.resolve(__dirname, 'src')
    }]
}
复制代码

在plugins中配置

plugins: [
    //用惟一的标识符id来表明当前的HappyPack是用来处理一类特定文件
    new HappyPack({
        id: 'babel',
        //如何处理.js文件，和rules里的配置相同
        loaders: [{
            loader: 'babel-loader',
            query: {
                presets: [
                    "env", "react"
                ]
            }
        }]
    }),
    new HappyPack({
        id: 'css',
        loaders: ['style-loader', 'css-loader'],
        threads: 4, //表明开启几个子进程去处理这一类型的文件
        verbose: true //是否容许输出日子
    })
]
复制代码

8.sourceMap

结合以前的sourceMap文章，在不一样环境用不一样的sourceMap打包。

在日常开发中，推荐使用cheap-module-eval-source-map，这样报错提示比较彻底，打包速度也比较快。

而线上代码若是也须要map映射的话，推荐使用cheap-module-source-map，这样报错提示会更好一些。

结语

除了这些方法，其实还有不少提高打包速度的方法，这须要咱们在日常不断的积累，因此咱们在平常开发中，要善于总结，把使用到的好的方法都记录下来，为之后的工做打下坚实的基础。