当一个 vue 的项目体积变得十分庞大的时候, 使用 webpack 的代码分离功能将 Vue Components,routes 或 Vuex 的代码进行分离并按需加载, 会极大的提高 App 的首屏加载速度.
image_1ck53hs7oe40usv1ria21scqm9.png-576.8kB
在 Vue 的项目中, 我们可以在三种不同的情况下使用懒加载和代码分离功能:
Vue 组件, 也称为异步组件 https://vuejs.org/v2/guide/components.html#Async-Components
Vue-Router
Vuex
三者的共同点都是使用的动态 import https://github.com/tc39/proposal-dynamic-import , 这在 Webpack 的第二个版本就开始被支持.
在 Vue 组件中进行懒加载
在 Eggheads 中有关于使用 Vue 异步组件实现按需加载组件 https://egghead.io/lessons/load-components-when-needed-with-vue-async-components 的解释.
实现异步组件只需要使用 import 函数去注册组件即可:
Vue.component('AsyncCmp', () => import('./AsyncCmp'))
也可以使用本地注册组件的方式:
- new Vue({
- // ...
- components: {
- 'AsyncCmp': () => import('./AsyncCmp')
- }
- })
使用箭头函数指向 import 函数, Vue 将会在需要该组件的时候才执行请求加载该组件的代码.
如果导入的组件是使用命名的方式进行导出的, 你可以在 Promise 的返回值中使用对象解构的方式实现按需加载组件. 下面是加载 KeenUI https://github.com/JosephusPaye/Keen-UI 的 UiAlert 组件的例子:
- components: {
- UiAlert: () => import('keen-ui').then(({ UiAlert }) => UiAlert)
- }
在 Vue router 中进行懒加载
Vue router 在原生支持懒加载 https://router.vuejs.org/guide/advanced/lazy-loading.html . 和懒加载组件的方式一样, 都是使用 import 函数. 例如我们想在 / login 这个路由下懒加载 Login 组件.
- // 不再使用 import Login from './login'
- const Login = () => import('./login')
- new VueRouter({
- routes: [
- { path: '/login', component: Login }
- ]
- })
在 Vuex 中进行懒加载
Vuex 的 registerModule 方法允许我们动态的创建 Vuex 的模块. 如果我们使用 import 函数在 Promise 中返回模块作为载荷 (payload), 就实现了懒加载.
- const store = new Vuex.Store()
- ...
- // 假设我们想加载'login'这个模块
- import('./store/login').then(loginModule => {
- store.registerModule('login', loginModule)
- })
总结
在 Vue + Webpack 中是懒加载十分简单. 赶快使用上面学习到的方法将你的 Vue 项目进行代码分离并在它们需要的时候进行按需加载, 这样可以显著减少应用首屏加载的时间.
来源: http://www.jianshu.com/p/42429ba533aa