基于vue2.5和webpack3.8的配置及其优化实践

最近升级了基于vue2.0+webpack1.0开发的基础cms框架，vue升级为最新2.5版本，webpack升级为3.8版本。升级过程当中顺便作了下项目的构建优化，具体围绕如下几点来实践：

1. vue-loader 配置
2. webpack 外部扩展(Externals) 配置
3. webpack DllPlugin和DllReferencePlugin配置

4. happypack 多进程loader构建配置

5. webpack-parallel-uglify-plugin 生成环境多进程构建配置

6. Webpack 3 的新功能：Scope Hoisting

项目源代码我已放在gitHub,连接地址：https://github.com/wangweianger/vue2.5-webpack3.8-spa-base-cms

vue-loader 配置

vue-loader相较之前有了大的改变，之前的 loader:"vue" 需更改成 loader:"vue-loader",须要详细配置options的相关参数。

vue-cli 工具生成的vue-loader 配置比较完整，但文件比较多，咱们应该按照本身的项目按需配置。

具体options参数请参考：vue-loader.vuejs.org/zh-cn/

本项目loader配置以下：

webpack 外部扩展(Externals) 配置

解释：防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。

所以不少框架和库咱们能够放在CDN，编译时不须要打包到生产文件中。

参考连接：doc.webpack-china.org/configurati…

以官方的JQUERY为例子：

1.jquery在html内映入

2.webpack.base.config.js 新增以下配置

至此能够在项目的任何地方 import $ from 'jquery' 使用

webpack DllPlugin和DllReferencePlugin配置

参考连接：doc.webpack-china.org/plugins/dll…

DLLPlugin 和 DLLReferencePlugin 用某种方法实现了拆分 bundles，同时还大大提高了构建的速度。

解析：咱们经常使用的框架或者包是不会频繁更新的，甚至是引入第一次以后就不会再作更改，针对于这种状况，为何不把它单独的拆分为一个或多个bundles呢。

DllPlugin 的核心就在这里，拆分不须要常常更改的包，而没必要每次都重新编译。

具体体现到本项目以下：

1.新增 webpack.dll.config.js 文件，此配置是单独的webpack配置。 代码请参考demo项目。

2.webpack.product.config.js plugins配置 webpack.DllReferencePlugin 插件

3.index.html 新增vendor.dll.js 文件

备注：此处我些了一个webpack-dll-loader 的loader不须要手动增长script脚本，具体的配置请参考项目demo。

注意事项：webpack.DllPlugin 和 webpack.DllReferencePlugin 的context 配置须要保持一致。

happypack

参考连接：www.npmjs.com/package/hap…

HappyPack makes webpack builds faster by allowing you to transform multiple files in parallel.

HappyPack使webpack构建更快，容许你并行转换多个文件。

项目对.vue.、js、.sass 文件进行了happyPack配置以下：

webpack-parallel-uglify-plugin配置

参考连接：www.npmjs.com/package/web…

webpack提供的UglifyJS插件是单线程编译的，这个插件为每一个可用的cpus的线程并行运行的uglify，所以能够加快webpack的生产构建过程。

webpack.product.config.js新增以下配置：

注意点：若是你的项目编译以后还有es6的语法请使用 uglifyES 去配置，若是没有es6的语法请使用uglifyJS配置。

uglifyES的参数请参考：www.npmjs.com/package/ugl…

uglifyJS的参数请参考：www.npmjs.com/package/ugl…

Webpack 3 的新功能：Scope Hoisting

参考连接：juejin.im/entry/59714…

此配置简单就是在webpack.product.config.js 配置webpack.optimize.ModuleConcatenationPlugin 插件

备注：此插件只对ES2015语法有效，所以使用babel编译以后的代码没有多大的提高。

babel-preset-env补充

参考连接：www.npmjs.com/package/bab…

babel-preset-env 是一个新的preset，新版 babel-loader 推荐使用的环境预设插件，它的功能很强大，经过根据您的目标浏览器或运行时环境自动肯定您须要的Babel插件。

最强大的使用就在 targets 配置，支持 chrome, opera, edge, firefox, safari, ie, ios, android, node, electron.

具体的target配置请参考：www.npmjs.com/package/bro…

若是 babel-preset-env 配置编译后的代码有es6的语法，打包压缩时就不能使用webpack自带的webpack.optimize.UglifyJsPlugin插件，请使用webpack-parallel-uglify-plugin插件的uglifyES配置或者uglifyjs-webpack-plugin插件This plugin uses UglifyJS v3 (`uglify-es`) to minify your JavaScript，uglifyjs-webpack-plugin默认多线程：Default number of concurrent runs: os.cpus().length - 1. 能够本身配置。

上面配置了那么多下面咱们来看看具体的优化成果：

1.webpack1.1基础项目打包用时 大概为31~33秒

2.webpack3.8.1运行时间大概为 26~27秒 （可见webpack版本的升级性能有显著的提升）

3.配置了happypack和webpack-parallel-uglify-plugin插件以后时间为 15~16秒 （可见构建性能有很大的提高）

4.配置DLLPlugin以后构建时间为 8~10秒左右 （可见构建性能有很是大的提高）

总结：从webpack1.0升级到webpack3.8并配置了一些优化插件以后项目构建速度提高4倍有于。

此篇文章，有完整的项目源码，vue2.5+webpack3.8 搭建的集成cms框架 ，后期有新的优化也会实时更新，再此给你们一个参考做用

关注个人博客：zane的我的博客

原文地址：基于vue2.5和webpack3.8的配置及其优化实践