Vue Router的懒加载路径

单页应用产出的入口chunk大小随着业务的复杂度线性增加,导致后期加载速度越来越慢。后面就需要对不同路径下的模块进行拆分,打包到相应的chunk下,按需加载,找到chunk的大小、个数和页面加载速度的平衡点。

解决办法

.vue模块文件按需加载,其实要做到两件事情:一是标记出这是一个异步组件;二是通知webpack把该组件单独产出为一个chunk。

vue的异步组件

官网给出的异步组件写法:异步组件是一个函数,函数的返回值是一个Promise,只是Promise的resolve函数的参数是常规组件的定义本身。

const AsyncCom = () => Promise.resolve({ /* component definition */ })

webpack异步模块的引入办法

这个对webpack不同的版本来说,用法有点区别: webpack版本在1-2之间,可以使用require.ensure来告诉webpack引入了一个异步模块

require.ensure([AYNC_MODULE_PATH],  CALLBACK, CHUNK_NAME)

其实require.ensure编译后是一个叫_webpack_require_.e的函数,其本身是一个thenable实例,require.ensure的回调放到_webpack_require_.e.then(fn)里面 为了满足以上两个条件

const AsyncCom = resolve => require.ensure([], () => resolve(require(AYNC_MODULE_PATH)), CHUNK_NAME);

webpack>=2的版本可以通过import()来指定动态引入的模块

import('./A.vue') // returns a Promise

Vue Router中的懒加载路径的使用办法

// const A = resolve => require.ensure([], () => resolve(require('./a.vue')), 'A');
const A = () => import('./a.vue')

const router = new VueRouter({
  routes: [
    { path: '/a', component: A }
  ]
})

Tips

组合多个异步模块到一个chunk文件

对不同路径进行按需加载,并不一定非得每个路径产出一个chunk,这个还得按不同的业务和场景进行区分,有时候对于同一个业务下的的小异步模块可以进行合并处理。在webapck版本>2.4时,可以在import引入的时候提供一个/* webpackChunkName: CHUNK_NAME*/注释,来表示chunkname,

const A = () => import(/* webpackChunkName: "group-a-b-c" */ './a.vue')
const B = () => import(/* webpackChunkName: "group-a-b-c" */ './b.vue')
const C = () => import(/* webpackChunkName: "group-a-b-c" */ './c.vue')

// webpack.conf.js
output: {
         ......
        // 使用code-split产出的chunk文件名
        chunkFilename: utils.assetsPath('js/[chunkname].[chunkhash].chunk.js'),
        ......
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏老九学堂

编码秘籍,Java程序员必看的调试技巧

调试可以帮助我们识别和解决应用程序缺陷,老九君下面介绍的调试方法基本都是通用的,有了下面的这些技巧在开发中会让我们在编程中事半功倍,避免浪费时间! 1.条件断点...

3906
来自专栏JadePeng的技术博客

axios介绍与使用说明 axios中文文档

本周在做一个使用vuejs的前端项目,访问后端服务使用axios库,这里对照官方文档,简单记录下,也方便大家参考。 Axios 是一个基于 Promise 的 ...

2.2K9
来自专栏小程序解决方案的专栏

Wafer2 Node.js QuickStart 架构分析

Wafer2 的 Node.js QuickStart 采用了 Koa.js 框架编写,Koa 将整个请求过程看做全异步的操作,使用 Node.js 7.6 开...

6.1K6
来自专栏Golang语言社区

实效go编程--4

func handle(queue chan *Request) { for r := range queue { process(r)...

35715
来自专栏技术之路

go微服务框架go-micro深度学习(二) 入门例子

    上一篇帖子简单介绍了go-micro的整体框架结构,这一篇主要写go-micro使用方式的例子,中间会穿插一些go-micro的源码,和调用流程图,帮大...

1.1K5
来自专栏Eugene's Blog

php文件包含漏洞分类目录文章标签友情链接联系我们

1392
来自专栏架构师之路

一分钟实现分布式锁

一、缘起 分布式环境下,多台机器上多个进程对一个数据进行操作,如果不做互斥,就有可能出现“余额扣成负数”,或者“商品超卖”的情况,如何实现简易分布式锁,对分布式...

4066
来自专栏零基础使用Django2.0.1打造在线教育网站

零基础使用Django2.0.1打造在线教育网站(提示):错误贴

努力与运动兼备~~~有任何问题可以加我好友或者关注微信公众号,欢迎交流,我们一起进步!

1473
来自专栏菜鸟计划

跨域请求的常用方式及解释

同源策略 首先基于安全的原因,浏览器是存在同源策略这个机制的,同源策略阻止从一个域加载的脚本去获取另一个域上的文档属性。也就是说,受到请求的 URL 的域必须与...

3529
来自专栏佳爷的后花媛

php基础(一)

static 是静态变量,在局部函数中存在且只初始化一次,使用过后再次使用会使用上次执行的结果; 作为计数,程序内部缓存,单例模式中都有用到。

2072

扫码关注云+社区