详解vue-cli之webpack3构建全面提速优化


Posted in Javascript onDecember 25, 2017

前言

伴随着vue的全球化,已经各种vue的组件框架越来越完善,从早期的element-ui到vux,iview等越来越多高质量的项目,使用vue进行前端构建已然是一件工程化,模块化,敏捷化的事情

在这其中,相信很多人都会选择官方的vue-cli初始化工程模板,然后通过引入第三方组件框架和工具的方式进行开发构建,我个人也十分推崇这种做法。但是vue-cli初始化的项目模板毕竟是面向所有开发者的,在兼容性方面会有一定妥协。相信很多人都已经搜索过各类的webpack构建优化文章,但是很多不是版本太老就是不严谨

本文希望能在耗时优化与构建性能提升之间做一个平衡,即花最少的时间,对官方模板做最少的修改下,赚取最大的构建性能提升

思路

早期版本的vue-cli和webpack2时代,网上流传以下优化配置,但其实新版本的vue-cli和webpack3已经不需要

  1. 使用ParallelUglifyPlugin替换UglifyPlugin(新版本的UglifyPlugin已经支持且默认开启了多线程并行构建,所以此步骤没有必要)
  2. 启用webpack3的Scope Hoisting(vue-cli新版本已经配置webapck3,且已经默认开启此配置)
  3. 善用alias(新版本vue-cli已经进行此项工作)
  4. 配置CommonsChunkPlugin提取公用代码(新版本vue-cli已经进行此项工作)

对于新版本的vue-cli和webpack3,以下简单配置优化后可提升最少2倍的构建速度

  1. 按需引用
  2. 启用happypack多核构建项目
  3. 修改source-map配置
  4. 启用DllPlugin和DllReferencePlugin预编译库文件

实践

1、按需引用

1.1几乎所有的第三方组件框架都会提供组件的 按需引用 方式,以iview为例,通过借助插件babel-plugin-import 可以实现按需加载组件,减少文件体积,只需要修改 .babelrc 文件

npm install babel-plugin-import --save-dev

// .babelrc
{
 "plugins": [["import", {
 "libraryName": "iview",
 "libraryDirectory": "src/components"
 }]]
}

1.2然后这样按需引入组件,就可以减小体积了

import { Button } from 'iview'
Vue.component('Table', Table)

2、启用happypack多核构建项目

安装happypack后,修改 /build/webpack.base.conf.js 文件即可

npm install happypack --save-dev

// /build/webpack.base.conf.js
const HappyPack = require('happypack')
const os = require('os')
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length })
// 增加HappyPack插件
plugins: [
 new HappyPack({
  id: 'happy-babel-js',
  loaders: ['babel-loader?cacheDirectory=true'],
  threadPool: happyThreadPool,
 })
 ]
// 修改引入loader
{
 test: /\.js$/,
 // loader: 'babel-loader',
 loader: 'happypack/loader?id=happy-babel-js', // 增加新的HappyPack构建loader
 include: [resolve('src'), resolve('test')]
}

3、修改source-map配置

3.1首先修改 /config/index.js 文件

// /config/index.js
dev环境:devtool: 'eval'(最快速度)
prod环境:productionSourceMap: false(关闭source-map)

3.2然后修改 /src/main.js 文件,关闭生产环境的调试信息

// /src/main.js
const isDebug_mode = process.env.NODE_ENV !== 'production'
Vue.config.debug = isDebug_mode
Vue.config.devtools = isDebug_mode
Vue.config.productionTip = isDebug_mode

4、启用DllPlugin和DllReferencePlugin预编译库文件

这是最复杂也是提升效果最明显的一步,原理是将第三方库文件单独编译打包一次,以后的构建都不需要再编译打包第三方库

4.1 增加 build/webpack.dll.config.js 文件,并在其中配置需要单独DLL化的模块

const path = require("path")
const webpack = require("webpack")

module.exports = {
 // 你想要打包的模块的数组
 entry: {
  vendor: ['vue/dist/vue.esm.js', 'axios', 'vue-router', 'iview']
 },
 output: {
  path: path.join(__dirname, '../static/js'), // 打包后文件输出的位置
  filename: '[name].dll.js',
  library: '[name]_library'
 },
 plugins: [
  new webpack.DllPlugin({
   path: path.join(__dirname, '.', '[name]-manifest.json'),
   name: '[name]_library',
   context: __dirname
  }),
  // 压缩打包的文件
  new webpack.optimize.UglifyJsPlugin({
   compress: {
    warnings: false
   }
  })
 ]
}

4.2 在 build/webpack.dev.conf.js 和 build/webpack.prod.conf.js 增加如下插件

new webpack.DllReferencePlugin({
  context: __dirname,
  manifest: require('./vendor-manifest.json')
})

4.3 在 /package.json 增加命令

"dll": "webpack --config ./build/webpack.dll.config.js"

4.4 在 /index.html 增加DLL化JS引入(必须首先引入)

<script src="/static/js/vendor.dll.js"></script>

4.5 执行构建

npm run dll(这一步会生成build/vendor-manifest.json和static/js/vendor.dll.js)
npm run dev 或 npm run build

后记

以上四个大步骤完成后,我们就完成了对vue-cli模板工程构建优化提升,虽然看起来依然算不上简单,但是这已经是最最最简单的优化了,还有更多奇技淫巧没有展开,因为我觉得过多的优化配置意义不大,反而会给项目工程带来太多冗余和复杂化

以上的配置实际测试的构建效果是从原先的13秒减少到了6秒左右,热部署更是毫秒级的

最重要的是,最简单化的配置,在未来vue-cli和webpack升级新版本后,也可以很容易的重新配置进去使用,熟练配置一次后,重新再还原配置只需要 5分钟左右 想想花5分钟修改一下配置,就能换来每次构建2倍以上速度的提升,是不是会有点小激动呢:)

这里再多说些后话吧,其实webpack2至webpack3的升级,个人觉得蛮失望的,因为它还是没有从根本上解决其配置过于复杂的问题,作为目标是占领全世界所有web项目构建的产品,它应该更多地从易用性/人性化的角度去考虑

每一次看着webpack的工程里面的各种.babelrc,.postcssrc.js...还有各种的.conf文件,甚至还有各种的main,index,app文件,就忍不住想吐槽,究竟为什么前端的构建会发展成这样,一个好好的项目工程里,十几种配置文件,真的有必要吗?我原本以为webpack3会将这一切变得简单,然而它并没有,不过既然暂时没有办法去改变,那我们能做的就是,尽可能理解其中原理,尽自己最大的可能去简化/优化

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
调试Node.JS的辅助工具(NodeWatcher)
Jan 04 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
Feb 25 Javascript
一个JavaScript用逗号分割字符串实例
Sep 22 Javascript
jQuery实现“扫码阅读”功能
Jan 21 Javascript
JavaScript弹出对话框的三种方式
Mar 23 Javascript
微信小程序 教程之数据绑定
Oct 18 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
Nov 25 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
Jan 13 Javascript
RequireJs的使用详解
Feb 19 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
Oct 27 Javascript
微信小程序实现下拉刷新动画
Jun 21 Javascript
JavaScript实现优先级队列
Dec 06 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 #jQuery
zTree树形菜单交互选项卡效果的实现方法
Dec 25 #Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 #jQuery
Vue.js递归组件构建树形菜单
Dec 24 #Javascript
深入浅析JSONAPI在PHP中的应用
Dec 24 #Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
Dec 24 #Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 #jQuery
You might like
30个php操作redis常用方法代码例子
2014/07/05 PHP
Laravel中使用自己编写类库的3种方法
2015/02/10 PHP
JavaScript 核心参考教程 内置对象
2009/10/13 Javascript
jquery插件制作教程 txtHover
2012/08/17 Javascript
JavaScript在IE和FF下的兼容性问题
2014/05/19 Javascript
Javascript验证方法大全
2015/09/21 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
javascript回到顶部特效
2016/07/30 Javascript
JavaScript异步上传图片文件的实例代码
2017/07/04 Javascript
js实现日期显示的一些操作(实例讲解)
2017/07/27 Javascript
js实现导航跟随效果
2018/11/17 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
详解jquery和vue对比
2019/04/16 jQuery
js Array.slice的8种不同用法示例
2019/07/10 Javascript
Vue Object 的变化侦测实现代码
2020/04/15 Javascript
关于python pyqt5安装失败问题的解决方法
2017/08/08 Python
python使用生成器实现可迭代对象
2018/03/20 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
如何用Python来搭建一个简单的推荐系统
2019/08/07 Python
Python容器使用的5个技巧和2个误区总结
2019/09/26 Python
使用PyOpenGL绘制三维坐标系实例
2019/12/24 Python
Python matplotlib模块及柱状图用法解析
2020/08/10 Python
python speech模块的使用方法
2020/09/09 Python
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
关于Assembly命名空间的三个面试题
2015/07/23 面试题
2014年社区学雷锋活动总结
2014/03/09 职场文书
党性锻炼的心得体会
2014/09/03 职场文书
大学生党员自我批评思想汇报
2014/10/10 职场文书
幼儿园教师考核评语
2014/12/31 职场文书
高三复习计划
2015/01/19 职场文书
大学毕业生自我评价
2015/03/02 职场文书
基督教追悼会答谢词
2015/09/29 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书
使用python+pygame开发消消乐游戏附完整源码
2021/06/10 Python
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏