前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue Router的懒加载路径

Vue Router的懒加载路径

作者头像
用户1217459
发布2018-07-05 16:03:43
1.3K0
发布2018-07-05 16:03:43
举报
文章被收录于专栏:Young Dreamer

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

解决办法

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

vue的异步组件

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

代码语言:javascript
复制
const AsyncCom = () => Promise.resolve({ /* component definition */ })

webpack异步模块的引入办法

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

代码语言:javascript
复制
require.ensure([AYNC_MODULE_PATH],  CALLBACK, CHUNK_NAME)

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

代码语言:javascript
复制
const AsyncCom = resolve => require.ensure([], () => resolve(require(AYNC_MODULE_PATH)), CHUNK_NAME);

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

代码语言:javascript
复制
import('./A.vue') // returns a Promise

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

代码语言:javascript
复制
// 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,

代码语言:javascript
复制
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'),
        ......
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-06-21 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 解决办法
    • vue的异步组件
      • webpack异步模块的引入办法
        • Vue Router中的懒加载路径的使用办法
        • Tips
          • 组合多个异步模块到一个chunk文件
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档