• 技术文章 >web前端 >前端问答

    vue中什么是按需加载

    青灯夜游青灯夜游2022-01-10 17:36:45原创68

    在vue中,按需加载又称延迟加载或者懒加载,就是根据需要去加载资源;vue项目实现按需加载有3种方式:vue异步组件技术、es提案的import()、webpack提供的“require.ensure()”。

    本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。

    按需加载,又称延迟加载或者懒加载,就是根据需要去加载资源,只有在使用到的时候才会加载进来。

    为什么需要按需加载

    随着互联网的发展,一个网页需要承载的功能越来越多。 对于采用单页应用作为前端架构的网站来说,会面临着一个网页需要加载的代码量很大的问题,因为许多功能都集中的做到了一个 HTML 里。 这会导致网页加载缓慢、交互卡顿,用户体验将非常糟糕。

    导致这个问题的根本原因在于一次性的加载所有功能对应的代码,但其实用户每一阶段只可能使用其中一部分功能。 所以解决以上问题的方法就是用户当前需要用什么功能就只加载这个功能对应的代码,也就是所谓的按需加载。

    vue项目实现按需加载的方法

    vue项目实现按需加载的3种方式:vue异步组件技术、es提案的import()、webpack提供的require.ensure()

    vue异步组件技术

    vue-router配置路由,使用vue的异步组件技术,可以实现按需加载。这种方式下一个组件生成一个js文件

    用例:

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

    es提案的import() (推荐)

    webpack官方文档:webpack中使用import()

    vue官方文档:路由懒加载(使用import())

    用例:

    // 下面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
            }
        ]
    })

    webpack提供的require.ensure()

    vue-router配置路由,使用webpack的require.ensure技术,也可以实现按需加载。

    这种情况下,多个路由指定相同的chunkName,会合并打包成一个js文件。

    举例如下:

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

    【相关推荐:vue.js教程

    以上就是vue中什么是按需加载的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:vue 按需加载
    上一篇:jquery怎样设置只能填数字 下一篇:jquery怎样设置几秒循环

    相关文章推荐

    • 推荐 20 个近期比较“火热”的Vue项目(值得收藏)• 简单聊聊Vue3中的Hook特性(总结分享)• vue怎样解决axios请求出现前端跨域问题(实例详解)• Vue实例要怎么挂载?聊聊实例挂载的过程

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网