浅谈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 相关文章推荐
js浮动图片的动态效果
Jul 10 Javascript
js购物车实现思路及代码(个人感觉不错)
Dec 23 Javascript
jquery制作 随机弹跳的小球特效
Feb 01 Javascript
JavaScript组件焦点与页内锚点间传值的方法
Feb 02 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
Apr 13 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
Nov 30 Javascript
javascript合并表格单元格实例代码
Jan 03 Javascript
javascript中不易分清的slice,splice和split三个函数
Mar 29 Javascript
vue2.0获取鼠标位置的方法
Sep 13 Javascript
angular 服务随记小结
May 06 Javascript
JS实现点击掉落特效
Jan 29 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
星际RPG字典
2020/03/04 星际争霸
PHP连接MongoDB示例代码
2012/09/06 PHP
php删除与复制文件夹及其文件夹下所有文件的实现代码
2013/01/23 PHP
PHP模板引擎Smarty中的保留变量用法分析
2016/04/11 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
Javascript 去除数组的重复元素
2010/05/04 Javascript
jquery中对表单的基本操作代码
2010/07/29 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
2013/04/08 Javascript
简约JS日历控件 实例代码
2013/07/12 Javascript
jQuery is()函数用法3例
2014/05/06 Javascript
网页实时显示服务器时间和javscript自运行时钟
2014/06/09 Javascript
使用js获取图片原始尺寸
2014/12/03 Javascript
JS拖拽插件实现步骤
2015/08/03 Javascript
jQuery遍历DOM元素与节点方法详解
2016/04/14 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
2017/04/26 Javascript
JavaScript之Date_动力节点Java学院整理
2017/06/28 Javascript
JavaScript对JSON数据进行排序和搜索
2017/07/24 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
2018/08/27 Javascript
JavaScript键盘事件响应顺序详解
2019/09/30 Javascript
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
python基础教程之获取本机ip数据包示例
2014/02/10 Python
举例讲解Python中装饰器的用法
2015/04/27 Python
编写Python爬虫抓取豆瓣电影TOP100及用户头像的方法
2016/01/20 Python
Python中类的创建和实例化操作示例
2019/02/27 Python
python中列表的切片与修改知识点总结
2019/07/23 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
keras模型可视化,层可视化及kernel可视化实例
2020/01/24 Python
一文彻底解决HTML5页面中长按保存图片功能
2019/06/10 HTML / CSS
ProBikeKit澳大利亚:自行车套件,跑步和铁人三项装备
2016/11/30 全球购物
《莫高窟》教学反思
2014/02/25 职场文书
环境卫生标语
2014/06/09 职场文书
篮球社团活动总结
2014/06/27 职场文书
小学教师工作总结2015
2015/04/07 职场文书
2015年学校体育工作总结
2015/04/22 职场文书
2015年思想品德教学工作总结
2015/07/22 职场文书
学子宴致辞大全
2015/07/27 职场文书