Webpack掉坑之路（3）——webpack打包优化

前文

本文旨在对webpack打包过程进行优化（生成的文件大小优化），以提高打开React网页时（一般是第一次）的速度。

1. mode选项

mode选项分为“development”和“production”，我们一般在开发时使用"development"会快很多，但是效率的提高会带来编译后所生成文件大小的增长。

实际测试示例：

1）设置好webpack.config.js的配置文件，首先是开发模式，mode='development'

webpack配置文件内设置development模式

2）使用webpack命令打包，此处已经事先写好package.json文件，所以使用yarn/npm start即可。

package.json内的配置

3）命令执行及执行结果：

development模式下打包结果

4）下面是生产环境模式，mode='production'，过程与上述几个步骤基本一致，此处不再赘述，结果如下：

production模式下打包结果

可以看到，development模式下，bundle.js文件要大production模式下很多，但是速度上在编译过程中并没有太大的差别。
5） 接下来我们进行本地服务器上运行的时间测试，如下两图，分别是development模式下和production模式下的devServer运行时间：

development模式下的devServer运行时间

production模式下的devServer运行时间

因此，当我们需要启用devServer进行本地调试测试时，应该优先使用development模式，但在要部署到生产环境中前，应该将模式改为production模式。production模式已经可以将原先development模式的bundle.js大幅缩小了。

2. 待完善

附录

//webpack.config.js
const path = require('path');
const base = path.join(__dirname,'..');

module.exports={
    mode: 'development',    //可以为"development"或者"production"
    //此处省略其他配置选项...,
    devServer:{  //启用devServer时使用到的配置项
        contentBase: path.resolve(base, 'public'),
        historyApiFallback: true,
        inline: true,
    },
    performance: {
        hints: false    //关闭编译过程中的"warning"
    }
};