浅谈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 相关文章推荐
Ext javascript建立超链接,进行事件处理的实现方法
Mar 22 Javascript
&amp;lt;script defer&amp;gt; defer 是什么意思
May 10 Javascript
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
Mar 23 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
Sep 23 Javascript
jquery ui对话框实例代码
May 10 Javascript
动态获取复选框checkbox选中个数的jquery代码
Jun 25 Javascript
js中的前绑定和后绑定详解
Aug 01 Javascript
jQuery实现当按下回车键时绑定点击事件
Jan 28 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
Oct 30 Javascript
jQuery密码强度验证控件使用详解
Jan 05 Javascript
Angular实现响应式表单
Aug 04 Javascript
vue基于Teleport实现Modal组件
May 31 Vue.js
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
用文本文件制作留言板提示(上)
2006/10/09 PHP
Composer设置忽略版本匹配的方法
2016/04/27 PHP
php微信开发之带参数二维码的使用
2016/08/03 PHP
Javascript &amp; DHTML 实例编程(教程)DOM基础和基本API
2007/06/02 Javascript
ext监听事件方法[初级篇]
2008/04/27 Javascript
Jquery中获取iframe的代码
2011/01/11 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
JavaScript的arguments对象应用示例
2014/09/15 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
2016/12/20 Javascript
ES6概念 Symbol.keyFor()方法
2016/12/25 Javascript
解决JQuery全选/反选第二次失效的问题
2017/10/11 jQuery
JavaScript使用面向对象实现的拖拽功能详解
2019/06/12 Javascript
es6数组includes()用法实例分析
2020/04/18 Javascript
vue实现lodop打印功能的示例
2020/11/11 Javascript
[04:52]2015国际邀请赛LGD战队晋级之路
2015/08/14 DOTA
简单的Apache+FastCGI+Django配置指南
2015/07/22 Python
pycharm远程linux开发和调试代码的方法
2018/07/17 Python
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
python tkinter基本属性详解
2019/09/16 Python
Python networkx包的实现
2020/02/14 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
一款利用html5和css3实现的3D立方体旋转效果教程
2016/04/26 HTML / CSS
纯CSS3实现圆圈动态发光特效动画的示例代码
2021/03/08 HTML / CSS
HTML5中的postMessage API基本使用教程
2016/05/20 HTML / CSS
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
2016/03/21 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
2016/05/13 HTML / CSS
日本面向世界,国际级的免税在线购物商城:DOKODEMO
2017/02/01 全球购物
StubHub德国:购买和出售门票
2017/09/06 全球购物
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
阿里巴巴Oracle DBA笔试题答案-备份恢复类
2013/11/20 面试题
介绍一下Transact-SQL中SPACE函数的用法
2015/09/01 面试题
教师应聘自荐信范文
2014/03/14 职场文书
深入开展党的群众路线教育实践活动心得体会
2014/11/05 职场文书
社区党建工作总结2015
2015/05/13 职场文书
Nginx服务器如何设置url链接
2021/03/31 Servers
详解Nginx 工作原理
2021/03/31 Servers