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')