Webpack 2中一些常见的优化措施

分离第三方依赖

在开发环境下, 通常会采取 HMR 模式来提高开发效率. 但一般情况下, 我们只会更改自身的业务文件, 不会去更改第三方的依赖, 但 webpack 在 rebuild 的时候, 依旧会 build 所有的依赖. 因而, 为减少 rebuild 的时间, 我们可以分离第三方依赖, 在项目启动之前, 将其单独打包和引入.

多进程构建

Webpack的构建过程是单进程的，利用HappyPack可以让loader对文件进行多进程处理，以此加快rebuild速度

提取公共的依赖模块

无论是单页还是多页应用，在生产环境下，通常都会利用CommonsChunkPlugin插件来提供公共的依赖模块。但是这种方式会导致两个问题：1.业务越复杂，第三方依赖会越多，vendor包会越大；2.没有隔离业务路由组件，所有的路由都可能会去加载vendor，但并不是所有的路由组件都会依赖node_module下的所有模块。所以我们应该分析业务依赖和路由，尽可能将所有组件的公共依赖提取出来。

文件分离

文件分离主要是将图片和CSS从js中分离。图片和CSS都是Webpack需要构建的资源，通过某种配置，图片可以以base64的方式混淆在js文件中，这会增加最终的bundle文件的大小。在生产环境下，可以考虑将图片和css从js中分离。

• 在生产环境下，通过自定义插件，将图片的本地引用替换为CDN的链接

• 在生产环境下，通过ExtractTextPlugin来提取CSS

资源混淆和压缩

Webpack提供的UgligyJS插件由于采用单线程压缩，速度比较慢，可以使用Prarllel插件进行优化

Gzip压缩

在生产环境下，如果想进一步减少bundle文件的大小，可以使用Gzip压缩

按需加载

在单页应用中，一个应用可能会对应很多路由，每个路由都会对应一个组件；如果将这些组件全部放入一个bundle文件中，会导致最终的bundle文件比较大，因而，我们需要利用Webpack的Code Splitting功能，将代码进行分割，实现路由的按需加载。

参考文章：