vue 优化

Vue优化

一、路由懒加载

1. 打包项目产生的问题

在不做优化的情况，所有的代码（业务代码、工具代码、库代码）都会打包到一起，导致我们从任何页面开始访问的时候都需要加载全部的代码，使页面的加载速度变慢，影响了用户体验。

其实我们可以采用懒加载的方法，将某些代码分割出去，只有在需要展示的时候才去加载，这样就可以大大提升首页或者其他常用页面的加载速度，其他页面在打开的时候再去加载代码，虽然速度有下载，但是利大于弊。

实现起来非常简单，vue-cli搭配着webpack已经实现了 自动代码分割的异步组件。

2. 实现懒加载

// 同步引入
import Home from '@/views/Home'
// 异步引入 懒加载
const Home = () => import('@/views/Home')

3. 把组件按组分块

有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用 命名 chunk ，一个特殊的注释语法来提供 chunk name (需要 Webpack > 2.4)。

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue'