Vue项目性能优化整理
以下方式基于 @vue/cli 快速搭建的交互式项目脚手架
1. 路由懒加载
当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
1 import Vue from 'vue' 2 import Router from 'vue-router' 3 import store from './store' 4 import Home from './views/Home.vue' 5 6 Vue.use(Router) 7 8 const router = new Router({ 9 routes: [ 10 { 11 path: '/', 12 name: 'home', 13 component: Home, 14 }, 15 { 16 path: '/make', 17 name: 'make', 18 component: () => import(/* webpackChunkName: "make" */ './views/Make.vue'), 19 } 20 ], 21 })
