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

1 天前 · 188 次阅读

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

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

[图片上传失败...(image-e1ba33-1533613040860)]

在Vue的项目中,我们可以在三种不同的情况下使用懒加载和代码分离功能:

三者的共同点都是使用的动态import,这在Webpack的第二个版本就开始被支持。

在Vue组件中进行懒加载

在Eggheads中有关于使用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 router中进行懒加载

Vue router在原生支持懒加载。和懒加载组件的方式一样,都是使用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项目进行代码分离并在它们需要的时候进行按需加载,这样可以显著减少应用首屏加载的时间。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容

  • 内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489...
    秋玄语道阅读 13,691评论 3 116
  • 网格化滴灌式3510教育模式,这是一种全新的提法,这是一次大胆的创新,这是一次野心的尝试,这是一次推陈出新...
    吾先生ING阅读 206评论 0 0
  • 蓦然回首,发现自己改变了。 深夜十一点多,身处外地,也没阻挡下我该做的事情。思路清晰,理智抛弃了懒惰,...
    siweier阅读 266评论 0 0
  • 昨天,正是我入职科瑞三周年纪念日,像是冥冥之中,因为也是我辞职的日子,离别总是伤感,回顾三年,说长不长说短不短,但...
    上岸者阅读 151评论 0 0