VUE路由中常用的按需加载方式（非VUE也可以使用）

最新推荐文章于 2024-08-21 10:47:30 发布

原创最新推荐文章于 2024-08-21 10:47:30 发布 · 346 阅读

0 ·

CC 4.0 BY-SA版权

javascript 同时被 2 个专栏收录

46 篇文章

订阅专栏

webpack

2 篇文章

订阅专栏

本文详细介绍了Webpack在不同版本中实现模块动态加载的方法，包括基本的require用法、Webpack4中利用import()函数进行代码分割的技术，以及Webpack1/2中使用require.ensure实现懒加载的策略。这些技术能够有效提升应用的加载速度和用户体验。

传送门：添加链接描述
总结一下
1、
最基本的require 用法，

{
    path: '/promisedemo',
    name: 'PromiseDemo',
    component: resolve => require(['../components/PromiseDemo'], resolve)
}

2、
webpack 4 中的方法

// 下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。
const ImportFuncDemo1 = () => import('../components/ImportFuncDemo1')
const ImportFuncDemo2 = () => import('../components/ImportFuncDemo2')
 
// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。
// const ImportFuncDemo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo')
// const ImportFuncDemo2 = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo2')
export default new Router({
    routes: [
       {
            path: '/importfuncdemo1',
            name: 'ImportFuncDemo1',
            component: ImportFuncDemo1
        },
        {
            path: '/importfuncdemo2',
            name: 'ImportFuncDemo2',
            component: ImportFuncDemo2
        }
    ]
})

3、
webpack 1/2 中的方法

{
    path: '/promisedemo',
    name: 'PromiseDemo',
    component: resolve => require.ensure([], () => resolve(require('../components/PromiseDemo')), 'demo')
}