优化瓶颈：打包构建过程太浪费时间；打包结果体积太大
一、尽量与时俱进
如果想要提高webpack的打包速度，我们可以首先选择升级webpack的版本、nodejs的版本及yarn或npm包管理工具的版本。
因此在项目中尽可能使用最新稳定版本的webpack、nodejs、npm或yarn能有效地提升打包构建的效率。
二、减少loader的执行
根据具体情况使用include或exclude，在尽可能少的模块上执行Loader。
rules:[
{
test:/\.js$/,
exclude:/node_modules/,//针对node_modules文件路径之外的js文件
use:[{loader:'babel-loader'}]
}
]同时与之对应的还有一个include字段，其使用含义与exclude相反，即仅对其指定范围内的JavaScript文件进行处理，以降低loader被执行的频率。
注意：使用exclude或include可以帮助我们规避对庞大的第三方库文件的处理，但仅通过限定文件处理范围所带来的性能提升其实是有限的，除此之外，如果开启缓存将构建结果缓存到文件系统中，则可让babel-loader的工作效率得到成倍增加，处理方式也很简单，只需为loader增加相应的参数即可
总结：
1、使用include或exclude
2、开启缓存
三、确保插件的精简和可靠
根据前端代码的执行环境是线上环境还是开发环境来规定不同的webpack配置内容，比如在线上环境中，我们希望打包后的代码尺寸尽可能小，用户加载的速度尽可能快，所以就需要对代码进行压缩，下面的配置项声明使用OptimizeCSSAssetsPlugin插件来压缩CSS资源文件。
如果在开发环境下，由于不需要考虑代码对用户的加载速率，并且压缩了反而会降低代码的可读性，增加开发成本，所以在开发环境下不用引入代码压缩插件。
四、合理配置resolve参数
配置resolve参数可以为我们在编写代码引入模块时提供不少便利，比如使用extensions省略引入JavaScript文件的后缀，使用alias减少书写所引入模块的多目录层级，使用mainFiles声明目录下的默认使用文件等，如果滥加使用也会降低打包速度。
五、使用DllPlugin
我们仅需要在第一次打包时去分析这些第三方库，而在之后的打包过程中只需使用之前的结果即可
六、单线程转化为多进程
但好在大多数CPU已经都是多核的了，我们可以使用happypack充分释放CPU在多核并发方面的优势，帮助我们把打包构建任务分解成多个子任务去并发执行，这将大大提高打包的效率。其使用方法也很简单，就是将原有的loader配置转移到happypack中去处理
七、压缩打包结果的体积
1、删除冗余代码，tree-shaking，比如console语句、注释、多余空格等，uglifyjs-webpack-plugin
2、代码拆分按需加载，根据路由划分打包文件，路由懒加载
3、可视化分析，webpack-bundle-analyzer，它的分析结果会生成一个文件大小图