浅谈vue项目打包优化策略


Posted in Javascript onSeptember 29, 2018

使用vue-cli部署生产包时,发现资源包很大,打包后的vendor.js达到了1.4M,这已经很大了,而且会影响到首屏加载。那么,怎么优化呢?

1.组件按需加载

这是首先可以优化的点。如果频繁使用了第三方组件/UI库,如我的项目中经常同时使用了 element-ui, mint-ui,echarts等组件库,如果全部引入,项目体积非常大,这时可以按需引入组件。

示例如下:

1.1 element-ui

首先,安装 babel-plugin-component:

npm install babel-plugin-component -D

然后,将.babelrc 修改为:

{
 "presets": [["es2015", { "modules": false }]],
 "plugins": [
  [
   "component",
   {
    "libraryName": "element-ui",
    "styleLibraryName": "theme-chalk"
   }
  ]
 ]
}

然后引入部分组件,这样一来,就不需要引入样式了,插件会帮我们处理。

// main.js
import Vue from 'vue'
import { Dialog, Loading } from 'element-ui'

Vue.use(Dialog)
Vue.use(Loading.directive)
Vue.prototype.$loading = Loading.service
// 然后正常使用组件

1.2 mint-ui

由于mint-ui是element-ui的移动端组件,所以它的使用和引入几乎和element-ui一样。

首先,安装 babel-plugin-component:

npm install babel-plugin-component -D

然后,将.babelrc 修改为:

{
 "presets": [
  ["es2015", { "modules": false }]
 ],
 "plugins": [["component", [
  {
   "libraryName": "mint-ui",
   "style": true
  }
 ]]]
}

然后引入部分组件

// main.js
import Vue from 'vue'
import { Toast, MessageBox } from 'element-ui'

Vue.use(Dialog)
Vue.use(Loading.directive)
Vue.prototype.$loading = Loading.service
// 然后正常使用组件

注意,element-ui和mint-ui不能同时在.babelrc中进行插件设置,这种情况下,依然可以按需引入,但是不要在.babelrc中配置,在引入的地方同时引入css即可。

1.3 echarts

首先安装babel-plugin-equire

npm i babel-plugin-equire -D

然后,在.babelrc文件中添加该插件

{
 "plugins": [
    // other plugins
    ...
    
  "equire"
 ]
}

创建一个js文件

// echarts.js
// eslint-disable-next-line
const echarts = equire([
 'tooltip',
 'candlestick',
 'bar',
 'line',
 'axisPointer',
 'legend',
 'grid'
])
export default echarts

// 业务组件,引入echarts
import echarts from '@/assets/lib/echarts'
// 使用与以前一样

按需加载echarts

解决vue-cli首屏加载慢的问题

2.路由懒加载

这里需要一个插件

vue-router官方推荐syntax-dynamic-import插件,不过它要求同时安装@bable/core^7.0.0,如果你安装了babel-core6,是会有版本冲突的。我的做法如下

npm install babel-plugin-syntax-dynamic-import --save-dev(^6.18.0)
// router.js
const login = () => import('@/components/login')
const router = new VueRouter({
 routes: [
  { path: '/login', component: login }
 ]
})

还有一种魔法注释用法

有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用 命名 chunk,一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')

3.异步组件

如果组件在页面加载时不需要,只在调用时用到,这时可以使用异步组件的写法。仅仅是引入和组件注册写法不同

// template
<test v-if="showTest"></test>

// script
 components: {
  test: () => import('./test') // 将组件异步引入,告诉webpack,将该部分代码分割打包
 },
 methods:{
   clickTest () {
     this.showTest = !this.showTest
  }
 }

4.图片的压缩合并

无损压缩图片:https://3water.com/softs/605425.html

如有可能,将图片制作成精灵图

5.CDN加速

在index.html中引入cdn资源

...
<body>

<div id="app">
</div>
<!-- built files will be auto injected -->
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>
</body>
...

修改 build/webpack.base.conf.js

module.exports = {
context: path.resolve(__dirname, '../'),
entry: {

app: './src/main.js'
},
externals:{

'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex':'Vuex',
'vue-resource': 'VueResource'
},
...
}

修改src/main.js src/router/index.js 注释掉import引入的vue,vue-resource

// import Vue from 'vue'
// import VueResource from 'vue-resource'
// Vue.use(VueResource)

6.压缩代码

vue-cli已经使用UglifyJsPlugin 插件来压缩代码,可以设置成如下配置:

new webpack.optimize.UglifyJsPlugin({
 compress: {
  warnings: false,
  drop_console: true,
  pure_funcs: ['console.log']
 },
 sourceMap: false
})

其中sourceMap: false是禁用除错功能。

如果设为true,在部署包中会生成.map结尾的js文件。它用于在代码混淆压缩的情况下仍可进行调试。这个功能虽好,但会大大增加整体资源包的体积,所以将其禁用。

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

Javascript 相关文章推荐
JavaScript 事件的一些重要说明
Oct 25 Javascript
JavaScript 原型学习总结
Oct 29 Javascript
JavaScript 获取任一float型小数点后两位的小数
Jun 30 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
Feb 17 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
Aug 18 Javascript
js实现表单及时验证功能 用户信息立即验证
Sep 13 Javascript
JavaScript实现图像模糊化的方法实例
Jan 15 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
Jun 12 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
ES6中Set和Map用法实例详解
Mar 02 Javascript
vue+element-ui表格封装tag标签使用插槽
Jun 18 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
Aug 19 Javascript
vue里input根据value改变背景色的实例
Sep 29 #Javascript
4个顶级开源JavaScript图表库
Sep 29 #Javascript
脚手架vue-cli工程webpack的基本用法详解
Sep 29 #Javascript
vue实现条件判断动态绑定样式的方法
Sep 29 #Javascript
vue根据值给予不同class的实例
Sep 29 #Javascript
vue实现重置表单信息为空的方法
Sep 29 #Javascript
Vue中的Props(不可变状态)
Sep 29 #Javascript
You might like
php中模拟POST传递数据的两种方法分享
2011/09/16 PHP
用 JSON 处理缓存
2007/04/27 Javascript
JS基础之undefined与null的区别分析
2011/08/08 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
2013/11/13 Javascript
一个网页标题title的闪动提示效果实现思路
2014/03/22 Javascript
jquery实现不同大小浏览器使用不同的css样式表的方法
2014/04/02 Javascript
jQuery检测鼠标左键和右键点击的方法
2015/03/17 Javascript
对象题目的一个坑 理解Javascript对象
2015/12/22 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
2016/08/10 Javascript
JavaScript 中有关数组对象的方法(详解)
2016/08/15 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
微信小程序 POST请求的实例详解
2017/09/29 Javascript
html中通过JS获取JSON数据并加载的方法
2017/11/30 Javascript
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
jQuery中each和js中forEach的区别分析
2019/02/27 jQuery
微信小程序关键字变色实现代码实例
2019/12/13 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
2020/09/21 Javascript
[48:51]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第一场 11.28
2020/12/02 DOTA
Python 字符串操作方法大全
2014/03/11 Python
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
python 利用for循环 保存多个图像或者文件的实例
2018/11/09 Python
Python PyQt5 Pycharm 环境搭建及配置详解(图文教程)
2019/07/16 Python
Python3自定义http/https请求拦截mitmproxy脚本实例
2020/05/11 Python
Etam俄罗斯:法国女士内衣和家居服网上商店
2019/10/30 全球购物
Zooplus罗马尼亚:宠物食品和配件
2019/11/02 全球购物
新西兰最大的连锁超市:Countdown
2020/06/04 全球购物
总经理司机岗位职责
2014/02/06 职场文书
招聘专员岗位职责
2014/03/07 职场文书
外联部演讲稿
2014/05/24 职场文书
图书馆标语
2014/06/19 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
婚礼父母答谢词
2015/01/04 职场文书
公司宣传语大全
2015/07/13 职场文书
OpenCV-Python实现轮廓拟合
2021/06/08 Python
详解nginx安装过程并代理下载服务器文件
2022/02/12 Servers