浅谈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 相关文章推荐
jQuery 版本的文本输入框检查器Input Check
Jul 09 Javascript
ExtJS 工具栏 分页事件参数
Mar 05 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
Aug 16 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
Oct 17 Javascript
纯JS实现旋转图片3D展示效果
Apr 12 Javascript
深入分析jsonp协议原理
Sep 26 Javascript
JavaScript如何实现跨域请求
Aug 05 Javascript
js微信支付实现代码
Dec 22 Javascript
vue指令以及dom操作详解
Mar 04 Javascript
react高阶组件经典应用之权限控制详解
Sep 07 Javascript
vue+element-ui+ajax实现一个表格的实例
Mar 09 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
Mar 13 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中对于浮点型的数据需要用不同的方法解决
2014/03/11 PHP
学习php中的正则表达式
2014/08/17 PHP
PHP获取当前页面URL函数实例
2014/10/22 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
PHP输出日历表代码实例
2015/03/27 PHP
10个基于Jquery的幻灯片插件教程
2010/10/29 Javascript
JavaScript 参数中的数组展开 [译]
2012/09/21 Javascript
推荐一个封装好的getElementsByClassName方法
2014/12/02 Javascript
JS实现同一个网页布局滑动门和TAB选项卡实例
2015/09/23 Javascript
javascript实现可键盘控制的抽奖系统
2016/03/10 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
jQuery实现div跟随鼠标移动
2020/08/20 jQuery
JavaScript编写棋盘覆盖代码详解
2017/08/28 Javascript
Vue 创建组件的两种方法小结(必看)
2018/02/23 Javascript
详解vue中axios的使用与封装
2019/03/20 Javascript
Vue实现日历小插件
2019/06/26 Javascript
vue路由守卫,限制前端页面访问权限的例子
2019/11/11 Javascript
pyqt4教程之widget使用示例分享
2014/03/07 Python
Python中的super用法详解
2015/05/28 Python
安装ElasticSearch搜索工具并配置Python驱动的方法
2015/12/22 Python
Python字符串格式化的方法(两种)
2017/09/19 Python
小米5s微信跳一跳小程序python源码
2018/01/08 Python
使用python读取csv文件快速插入数据库的实例
2018/06/21 Python
Python+selenium 获取浏览器窗口坐标、句柄的方法
2018/10/14 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
python已协程方式处理任务实现过程
2019/12/27 Python
Django REST framwork的权限验证实例
2020/04/02 Python
CSS3 mask 遮罩的具体使用方法
2017/11/03 HTML / CSS
美国知名平价彩妆品牌:e.l.f. Cosmetics
2017/11/20 全球购物
实习报告评语
2014/04/26 职场文书
优秀毕业生就业推荐信
2014/05/22 职场文书
医学专业大学生求职信
2014/07/12 职场文书
2014年学校办公室工作总结
2014/12/19 职场文书
好人好事新闻稿
2015/07/17 职场文书
清明扫墓感想
2015/08/11 职场文书
《槐乡的孩子》教学反思
2016/02/20 职场文书