详解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 相关文章推荐
js select常用操作控制代码
Mar 16 Javascript
jQuery选择头像并实时显示的代码
Jun 27 Javascript
JavaScript实现数字数组正序排列的方法
Apr 06 Javascript
JavaScript构造函数详解
Dec 27 Javascript
javascript从定义到执行 你不知道的那些事
Jan 04 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
Aug 02 Javascript
JQuery中解决重复动画的方法
Oct 17 Javascript
详解JavaScript中this的指向问题
Jan 20 Javascript
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
vue实现手机号码抽奖上下滚动动画示例
Oct 18 Javascript
vue实现点击追加选中样式效果
Nov 01 Javascript
javascript实现拖拽碰撞检测
Mar 12 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
【动漫杂谈】关于《请在T台上微笑》
2020/03/03 日漫
php实现记事本案例
2020/10/20 PHP
ie 处理 gif动画 的onload 事件的一个 bug
2007/04/12 Javascript
IE下通过a实现location.href 获取referer的值
2014/09/04 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
Javascript连接Access数据库完整实例
2015/08/03 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
node.js+express制作网页计算器
2016/01/17 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
2016/06/06 Javascript
微信小程序 教程之引用
2016/10/18 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
2017/07/31 Javascript
简单实现js上传文件功能
2017/08/21 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
从vue源码看props的用法
2019/01/09 Javascript
jquery获取img的src值实例介绍
2019/01/16 jQuery
微信实现自动跳转到用其他浏览器打开指定APP下载
2019/02/15 Javascript
解决VueCil代理本地proxytable无效报错404的问题
2020/11/07 Javascript
[02:09]DOTA2辉夜杯 EHOME夺冠举杯现场
2015/12/28 DOTA
Django中STATIC_ROOT和STATIC_URL及STATICFILES_DIRS浅析
2018/05/08 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
2020/05/12 Python
使用Python webdriver图书馆抢座自动预约的正确方法
2021/03/04 Python
使用JS+CSS3技术:让你的名字动起来
2013/04/27 HTML / CSS
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
2013/09/02 HTML / CSS
详解canvas多边形(蜘蛛图)的画法示例
2018/01/29 HTML / CSS
舒适的豪华鞋:Taryn Rose
2018/05/03 全球购物
伦敦鲜花递送:Flower Station
2021/02/03 全球购物
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
一个SQL面试题
2014/08/21 面试题
省级青年文明号申报材料
2014/05/23 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
卖车协议书范本4篇
2014/10/01 职场文书
工伤死亡理赔协议书
2014/10/20 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
关于食品安全的演讲稿范文(三篇)
2019/10/21 职场文书
Python读取和写入Excel数据
2022/04/20 Python