在webpack中使用Code Splitting--代码分割来实现vue中的懒加载
当Vue应用程序越来越大,使用Webpack的代码分割来懒加载组件,路由或者Vuex模块, 只有在需要时候才加载代码。
我们可以在Vue应用程序中在三个不同层级应用懒加载和代码分割:
- 组件,也称为异步组件
- 路由
- Vuex 模块
但是他们都有一些共同之处:自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
最新文章
- 分享:写了一个 java 调用 C语言 开发的动态库的范例
- 理解js中this的指向
- VCenter克隆虚拟机报错msg.snapshot.error-QUIESCINGERROR
- 不可不知的C#基础 4. 延迟加载 -- 提高性能
- Selenium2学习-012-WebUI自动化实战实例-010-解决元素失效:StaleElementReferenceException: stale element reference: element is not attached to the page document
- mysql基础语法之(全文索引)
- Extjs整体加载树节点
- c# ActiveX 控件的开发
- Call与Apply
- 快速排序(quicksort)算法实现
- 理解java的三大特性之多态(三)
- JNDI实现服务器(tomcat)与数据库(mysql)连接的数据源配置以及获取连接的java代码
- 《Windows驱动开发技术详解》之HelloDDK
- 嵌入式C开发---用循环实现左移右移
- springboot+mybatis+cucumber
- Android6.0 源码修改之屏蔽系统短信功能和来电功能
- 使用Maven+ssm框架搭建一个web项目
- python游戏编程——乌龟和鱼类场景编程
- 虚拟机安装win7 64位-完美解决-费元星
- JS获取 KindEditor textarea 标签 html内容失败的解决方法。