vue 前端项目上线优化(一)

vue 前端项目上线优化(一)

懒加载

  • 资源懒加载
  • 路由懒加载

资源懒加载

  • 涉及到如element-ui,ant-design 等UI框架按需加载,或Echarts图表按需加载加载等方式可以大大减小项目打包体积。我们只需要在真正要使用到它某一个组件的时候的时候才会在这里加载到我们需要的这个组件,而不是在最开始的时候把整个库都加载到项目上,这样做将会产生非常多不必要的开销。

实现方法

举个例子,echarts的按需引入

  • 在utils目录下新建文件echarts.js
let echarts = require('echarts/lib/echarts')
// 这里是你要引入的图表
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/scatter'
import 'echarts/lib/chart/scatter'
import 'echarts/lib/chart/bar'
//这里是你需要使用到的工具
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/grid'
import 'echarts/lib/component/dataset'
import 'echarts/lib/component/visualMap'
export default echarts
  • 然后在需要的地方引入即可
import echarts from '@/utils/echarts';
  • 当然我们也可以使用插件实现按需加载例如 babel-plugin-equire,这里就不过多赘述

路由懒加载

  • 路由懒加载主要能够解决的问题是可以减小第一次加载时的压力

实现方法

component: () => import('@/views/dashboard/housekeeper/housekeeper')
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值