详解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 相关文章推荐
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
Sep 07 Javascript
JScript中的undefined和&quot;undefined&quot;的区别
Mar 08 Javascript
js 创建快捷方式的代码(fso)
Nov 19 Javascript
javascript解决innerText浏览器兼容问题思路代码
May 17 Javascript
一个简单的JS鼠标悬停特效具体方法
Jun 17 Javascript
web网页按比例显示图片实现原理及js代码
Aug 09 Javascript
JavaScript修改css样式style动态改变元素样式
Dec 16 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
Nov 26 Javascript
Node.js数据库操作之连接MySQL数据库(一)
Mar 04 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
Mar 09 Javascript
jQuery弹出窗口简单实现代码
Mar 09 Javascript
如何把vuejs打包出来的文件整合到springboot里
Jul 26 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
smarty模板引擎基础知识入门
2015/03/30 PHP
PHP使用数组实现矩阵数学运算的方法示例
2017/05/29 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
jqueyr判断checkbox组的选中(示例代码)
2013/11/08 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
2015/04/21 Javascript
jQuery实现定时读取分析xml文件的方法
2015/07/16 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
2015/11/24 Javascript
vue.js绑定class和style样式(6)
2016/12/09 Javascript
Javascript 对cookie操作详解及实例
2016/12/29 Javascript
js replace()去除代码中空格的实例
2017/02/14 Javascript
浅谈微信页面入口文件被缓存解决方案
2018/09/29 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
2019/11/21 Javascript
JavaScript 异步时序问题
2020/11/20 Javascript
[15:39]教你分分钟做大人:龙骑士
2014/10/30 DOTA
Django的URLconf中使用缺省视图参数的方法
2015/07/18 Python
python实现八大排序算法(2)
2017/09/14 Python
浅谈django model postgres的json字段编码问题
2018/01/05 Python
Python返回数组/List长度的实例
2018/06/23 Python
python使用Plotly绘图工具绘制气泡图
2019/04/01 Python
Django实现网页分页功能
2019/10/31 Python
python如何爬取网页中的文字
2020/07/28 Python
使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例
2020/12/11 Python
python sleep和wait对比总结
2021/02/03 Python
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
HTML里显示pdf、word、xls、ppt的方法示例
2020/04/14 HTML / CSS
联想新加坡官方网站:Lenovo Singapore
2017/10/24 全球购物
Schutz鞋官方网站:Schutz Shoes
2017/12/13 全球购物
MADE荷兰:提供原创设计师家具
2018/04/03 全球购物
全球性的奢侈品梦工厂:Forzieri(福喜利)
2019/02/20 全球购物
禁毒宣传标语
2014/06/19 职场文书
理财学专业自荐书
2014/06/28 职场文书
党委书记群众路线对照检查材料思想汇报
2014/10/04 职场文书
毕业生自荐材料范文
2014/12/30 职场文书
中学生运动会广播稿
2015/08/19 职场文书
安全教育培训心得体会
2016/01/15 职场文书
2019求职信:应届生求职信范文
2019/04/24 职场文书