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

简书

在webpack中使用Code Splitting--代码分割来实现vue中的懒加载的更多相关文章

  1. Vue 路由懒加载, VueRouter一步完成Vue的路由懒加载 一行代码搞定懒加载

    Vue Router路由配置中的component里面配置即可 1 // 路由懒加载的方式加载组件 2 3 component: () => import('@/views/Detail'), ...

  2. Webpack探索【16】--- 懒加载构建原理详解(模块如何被组建&如何加载)&源码解读

    本文主要说明Webpack懒加载构建和加载的原理,对构建后的源码进行分析. 一 说明 本文以一个简单的示例,通过对构建好的bundle.js源码进行分析,说明Webpack懒加载构建原理. 本文使用的 ...

  3. vue项目中,单页图片过多,使用懒加载

    最近做项目,一页图片很多,加载的时候效果很差. 通过学习借鉴其他大神的方法,使用了插件vue-lazyload,使用这个插件,界面更美观了,加载的效果好起来. 安装 npm i vue-lazyloa ...

  4. webpack优化之玩转代码分割和公共代码提取

    前言 开发多页应用的时候,如果不对webpack打包进行优化,当某个模块被多个入口模块引用时,它就会被打包多次(在最终打包出来的某几个文件里,它们都会有一份相同的代码).当项目业务越来越复杂,打包出来 ...

  5. 使用Webpack的代码分离实现Vue懒加载(译文)

    当一个Vue的项目体积变得十分庞大的时候,使用Webpack的代码分离功能将Vue Components,routes或Vuex的代码进行分离并按需加载,会极大的提高App的首屏加载速度. 在Vue的 ...

  6. 使用Webpack的代码分离实现Vue懒加载

    当一个Vue的项目体积变得十分庞大的时候,使用Webpack的代码分离功能将Vue Components,routes或Vuex的代码进行分离并按需加载,会极大的提高App的首屏加载速度. 在Vue的 ...

  7. webpack4 系列教程(四): 单页面解决方案--代码分割和懒加载

    本节课讲解webpack4打包单页应用过程中的代码分割和代码懒加载.不同于多页面应用的提取公共代码,单页面的代码分割和懒加载不是通过webpack配置来实现的,而是通过webpack的写法和内置函数实 ...

  8. Vue代码分割懒加载的实现方法

    什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. 为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多 ...

  9. webpack指南(二)code spliting+懒加载

    code spliting 把代码分离到不同的 bundle 中,然后可以按需加载或并行加载这些文件. 代码分离可以用于获取更小的 bundle,以及控制资源加载优先级,如果使用合理,会极大缩减加载时 ...

随机推荐

  1. mybatis 查询 xml list参数

    mybatis 查询 xml list参数: <select id="getByIds" resultType="string" parameterTyp ...

  2. 解决jenkins下使用HTML Publisher插件后查看html报告显示不正常 以jmeter报告为例

    jenkins 配置使用html publisher查看jmeter html报告时,发现显示不全,很多东西显示不了.   项目配置:   查看html报告异常(很多资源无法加载):   控制台查看加 ...

  3. Streaming结合Kafka

    Spark2.11 两种流操作 + Kafka Spark2.x 自从引入了 Structured Streaming 后,未来数据操作将逐步转化到 DataFrame/DataSet,以下将介绍 S ...

  4. 从Java虚拟机的内存区域、垃圾收集器及内存分配原则谈Java的内存回收机制

    一.引言: 在Java中我们只需要轻轻地new一下,就可以为实例化一个类,并分配对应的内存空间,而后似乎我们也可以不用去管它,Java自带垃圾回收器,到了对象死亡的时候垃圾回收器就会将死亡对象的内存回 ...

  5. 7.java的请求转发和请求重定向

    1.请求重定向:是客户端的行为,response.sendRedirect(),从本质上讲等同于两次请求,前一次的请求对象不会保存,地址栏的URL地址会改变,一次新的转发. 2.请求转发:是服务器的行 ...

  6. vmware虚拟机的克隆

    开发中需要用到多个虚拟机进行实验.重新安装过程又太繁琐,通过vmware虚拟机自带软件能够很好的快速克隆出完全相同的系统.下面会为大家讲解关于vmware虚拟机怎么克隆,我所用的VMware版本是11 ...

  7. JS函数和对象(一)

    在本文章中,将对JS中的函数和对象进行一些讲解,不对之处还请之处 一.JS中的函数 1.1无参函数 其形式如下代码所示 function box(){ alert("我是一个函数,只有被调用 ...

  8. 用CSS3实现无限循环的无缝滚动

    有时候在页面的某个模块中,需要无限循环的滚动一些消息.那么如果我们用js实现无缝衔接滚动的思路是什么呢(比如我们这个模块是向上滚动的)? 克隆A一份完全一样的数据B放在原数据A的后面: 使用setIn ...

  9. [Oracle]高水位标记(HWM)

    (一)高水位标记(High Water Mark,HWM)的概念 所谓高水位标记,是指一个已经分配的段中,已经使用的空间与未使用的空间的分界线.在表的使用过程中,随着数据的不断增多(insert),H ...

  10. Codeforces Round #423 B. Black Square

    题目网址:http://codeforces.com/contest/828/problem/B 题目: Polycarp has a checkered sheet of paper of size ...