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

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功能，将代码进行分割，实现路由的按需加载。

参考文章：https://github.com/dwqs/blog/...