VUE+Webpack 实现懒加载的三种方式

最新推荐文章于 2022-04-03 03:00:00 发布

原创最新推荐文章于 2022-04-03 03:00:00 发布 · 238 阅读

0 ·

CC 4.0 BY-SA版权

博客介绍了路由组件的引入和懒加载方式。包含正常路由引入，以及两种不同的懒加载写法，其中第三种按模块划分懒加载为官方推荐方式，还给出了具体的代码示例。

{
path: “路由路径”,
component: () =>
import(/* webpackChunkName: "chunk名称用于代码分割 " */ “组件路径”)
}

第一种

引入方式就是正常的路由引入方式

const router = new Router({
routes: [
{
path: ‘/hyh’,
component: hyh,
name: ‘hyh’
}
]
})

第二种

const router = new Router({
routes: [
{
path: ‘/index’,
component: (resolve) => {
require([’…/components/index/index’], resolve) // 这里是你的模块不用import去引入了
}
}
]
})

第三种（推荐）

// r就是resolve
const list = r => require.ensure([], () => r(require(’…/components/list/list’)), ‘list’);
// 路由也是正常的写法这种是官方推荐的写的按模块划分懒加载
const router = new Router({
routes: [
{
path: ‘/list/blog’,
component: list,
name: ‘blog’
}
]
})