vue.js2.5和webpack3.8构建配置及优化实践

2019-03-1808:04:49WEB前端开发Comments2,953 views字数 3064阅读模式

升级了基于vue2.0+webpack1.0开发的基础cms框架,vue升级为最新2.5版本,webpack升级为3.8版本。升级过程中顺便做了下项目的构建优化,具体围绕以下几点来实践:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

  1. vue-loader 配置
  2. webpack 外部扩展(Externals) 配置
  3. webpack DllPluginDllReferencePlugin配置
  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的相关参数。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

vue-cli 工具生成的vue-loader 配置比较完整,但文件比较多,我们应该按照自己的项目按需配置。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

具体options参数请参考:https://vue-loader.vuejs.org/zh-cn/文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

本项目loader配置如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

vue.js2.5和webpack3.8构建配置及优化实践文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

webpack 外部扩展(Externals) 配置

解释:防止将某些 import 的包(package)打包到 bundle 中,而是在运行时(runtime)再去从外部获取这些扩展依赖(external dependencies)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

因此很多框架和库我们可以放在CDN,编译时不需要打包到生产文件中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

参考链接:https://doc.webpack-china.org/configuration/externals/文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

以官方的JQUERY为例子:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

1.jquery在html内映入文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

vue.js2.5和webpack3.8构建配置及优化实践文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

2.webpack.base.config.js 新增如下配置文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

vue.js2.5和webpack3.8构建配置及优化实践文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

至此可以在项目的任何地方  import $ from 'jquery' 使用文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

webpack DllPluginDllReferencePlugin配置

参考链接:https://doc.webpack-china.org/plugins/dll-plugin/文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

DLLPlugin 和 DLLReferencePlugin 用某种方法实现了拆分 bundles,同时还大大提升了构建的速度。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

解析:我们常用的框架或者包是不会频繁更新的,甚至是引入第一次之后就不会再做更改,针对于这种情况,为什么不把它单独的拆分为一个或多个bundles呢。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

DllPlugin 的核心就在这里,拆分不需要经常更改的包,而不必每次都从新编译。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

具体体现到本项目如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

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

vue.js2.5和webpack3.8构建配置及优化实践文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

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

vue.js2.5和webpack3.8构建配置及优化实践文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

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

vue.js2.5和webpack3.8构建配置及优化实践文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

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

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

happypack 

参考链接:https://www.npmjs.com/package/happypack文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

HappyPack makes webpack builds faster by allowing you to transform multiple files in parallel.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

HappyPack使webpack构建更快,允许你并行转换多个文件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

项目对.vue.、js、.sass 文件进行了happyPack配置如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

vue.js2.5和webpack3.8构建配置及优化实践文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

webpack-parallel-uglify-plugin配置

参考链接:https://www.npmjs.com/package/webpack-parallel-uglify-plugin文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

webpack提供的UglifyJS插件是单线程编译的,这个插件为每个可用的cpus的线程并行运行的uglify,因此可以加快webpack的生产构建过程。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

webpack.product.config.js新增如下配置:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

vue.js2.5和webpack3.8构建配置及优化实践文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

注意点:如果你的项目编译之后还有es6的语法请使用 uglifyES 去配置,如果没有es6的语法请使用uglifyJS配置。

uglifyES的参数请参考:https://www.npmjs.com/package/uglify-es文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

uglifyJS的参数请参考:https://www.npmjs.com/package/uglify-js文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

Webpack 3 的新功能:Scope Hoisting

参考链接:https://juejin.im/entry/5971483951882552681c4a30文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

此配置简单就是在webpack.product.config.js 配置webpack.optimize.ModuleConcatenationPlugin 插件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

vue.js2.5和webpack3.8构建配置及优化实践文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

备注:此插件只对ES2015语法有效,因此使用babel编译之后的代码没有多大的提升。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

babel-preset-env补充

参考链接:https://www.npmjs.com/package/babel-preset-env文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

babel-preset-env 是一个新的preset,新版 babel-loader 推荐使用的环境预设插件,它的功能很强大,通过根据您的目标浏览器或运行时环境自动确定您需要的Babel插件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

最强大的使用就在 targets 配置,支持 chrome, opera, edge, firefox, safari, ie, ios, android, node, electron.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

具体的target配置请参考:https://www.npmjs.com/package/browserslist文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

如果 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秒

vue.js2.5和webpack3.8构建配置及优化实践文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

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

vue.js2.5和webpack3.8构建配置及优化实践文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

3.配置了happypackwebpack-parallel-uglify-plugin插件之后时间为 15~16秒 (可见构建性能有很大的提升)

vue.js2.5和webpack3.8构建配置及优化实践文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

4.配置DLLPlugin之后构建时间为 8~10秒左右 (可见构建性能有非常大的提升)

vue.js2.5和webpack3.8构建配置及优化实践文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html

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

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/10088.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/gcs/10088.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定