在webpack中使用Code Splitting--代码分割来实现vue中的懒加载

Vue应用程序越来越大,使用Webpack的代码分割懒加载组件,路由或者Vuex模块, 只有在需要时候才加载代码。

我们可以在Vue应用程序中在三个不同层级应用懒加载和代码分割:

但是他们都有一些共同之处:自webpack2.0版本之后,他们都使用动态导入[译者注:也可以参考这个]。

Vue组件中的懒加载

这在Egghead上的"使用Vue异步组件按需加载组件"视频中有很好的解释。
这就像在注册组件时使用import函数一样简单:

 Vue.component('AsyncCmp', () => import('./AsyncCmp') 

并在本地注册使用:

new Vue({
	// ...
	components: {
		'AsyncCmp': () => import('./AsyncCmp')
	}
})

通过包装import函数进入到箭头函数,Vue将会在它被请求的时候执行加载这个模块。

如果组件导入使用命名导出[译者注:模块的导入导出,可以参考阮老师的文章],则可以在返回的Promise上使用对象解构。
例如,对于来自KeenUI的UiAlert组件:

...
components: {
  UiAlert: () => import('keen-ui').then(({ UiAlert }) => UiAlert)
}
...

Vue路由中的懒加载

Vue路由器内置支持懒加载。这就像用import函数导入组件一样简单。看个例子,我们想在 /login 路由中使用懒加载一个Login组件:

// Instead of: import Login from './login'
// 替换: import Login from './login'
const Login = () => import('./login')

new VueRouter({
  routes: [
    { path: '/login', component: Login }
  ]
})

懒加载Vuex模块

Vuex有一种registerModule方法可以让我们动态地创建Vuex模块。如果我们考虑到该import功能将ES模块作为有效载荷返回promise[原文: If we take into account that import function returns a promise with the ES Module as the payload],我们可以使用它来懒加载模块:

const store = new Vuex.Store()

...

// Assume there is a "login" module we wanna load
// 设想 我们需要加载一个"login"模块
import('./store/login').then(loginModule => {
  store.registerModule('login', loginModule)
})

结论

Vue和Webpack使用懒加载非常简单。使用您刚刚阅读的内容,您可以从不同方面开始分割应用程序,并在需要时加载应用程序,从而减轻应用程序的初始加载。

ps: 这篇文章,基本上是翻译过来的。感谢作者Alex Jover
原文链接:
Lazy Loading in Vue using Webpack's Code Splitting

其他文章:
weiqinl
简书

感谢您的认真阅读,更多内容请查看:
出处:http://www.cnblogs.com/weiqinl
个人主页http://weiqinl.com
github: weiqinl
简书:weiqinl
您的留言讨论是对博主最大的支持!
本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
posted @ 2017-08-07 17:18  weiqinl  阅读(885)  评论(0编辑  收藏  举报