Vue.js之组件异步加载

深碍√TFBOYSˉ_ 2022-05-14 13:08 471阅读 0赞

当项目中组件特别多的时候，通过webpack打包的组件非常多，如果在访问其中某一个路由对应的组件时，加载了所有组件的文件，对于性能的消耗是非常浪费的。  
此时，我们就需要使用**组件异步加载**，即**进入对应的组件时，只加载核心组件、代码和对应的组件代码**。  
通过vue-router和webpack实现  
需要插件支持： babel-plugin-syntax-dynamic-import

import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    // 这里不在提前引入所有需要的组件，而是在路由配置项的component中按需引入即可
    // import login from ('../components/login/login.vue')
    // import homePagefrom ('../components/login/homePage.vue')
    
    const homePage= () => {
        import('../components/home/homePage.vue')
    }
    
    Vue.use(VueRouter)
    const route = [
        {
            path: '/login',
            name: "登陆",
            // 当该路由被调用时，再去请求对应的组件内容
            component: () => import('../components/login/login.vue')
        },
        {
            path: '/homePage/:id',
            name: "首页",
            // 当该路由被调用时，再去请求对应的组件内容
            component: () => import('../components/home/homePage.vue')
        }
    ]
    
    export default () => {
        return new VueRouter ({
            route 
        })
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，471人围观）

还没有评论，来说两句吧...

相关阅读

相关【Vue3基础】组件保持存活、异步加载组件

一、组件保持存活 1、需求描述点击按钮跳转到其他组件后，原组件不会被销毁 2、知识整理 1）组件生命周期创建期：beforeCreate、created 挂载期

柔情只为你懂/ 2023年10月14日 11:13/ 0 赞/ 66 阅读

相关浅谈android中异步加载之"取消异步加载"二

首先，我得解释一下为什么我的标题取消异步加载打引号，这是因为可能最后实现效果并不是你自己想象中的那样。大家看取消异步加载，这不是很简单吗？AsyncTask中不是有一个canc

深藏阁楼爱情的钟/ 2022年08月23日 01:26/ 0 赞/ 233 阅读

相关 Vuejs（15）——Vue的异步组件

Vue的异步组件 1、前置要求建议使用webpack； Browserify在默认情况下不支持； 2、用法解释首先上官网说明： [https://c

野性酷女/ 2022年07月12日 11:44/ 0 赞/ 319 阅读

相关 Vue.js之组件异步加载

当项目中组件特别多的时候，通过webpack打包的组件非常多，如果在访问其中某一个路由对应的组件时，加载了所有组件的文件，对于性能的消耗是非常浪费的。此时，我们就需要使用

深碍√TFBOYSˉ_/ 2022年05月14日 13:08/ 0 赞/ 472 阅读

相关 Vue异步组件处理路由组件加载状态

问题场景在大型单页面应用中，处于对性能的考虑和首屏加载速度的要求，我们一般都会使用webpack的代码分割和vue-router的路由懒加载功能将我们的代码分成一个个模

青旅半醒/ 2022年05月14日 10:20/ 0 赞/ 267 阅读

相关异步组件实现按需加载

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQx

野性酷女/ 2022年04月13日 04:56/ 0 赞/ 402 阅读

相关 Vue异步加载组件（报错）

异步加载组件： ![在这里插入图片描述][20190419171146573.png] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5n

冷不防/ 2022年02月17日 13:46/ 0 赞/ 448 阅读

相关 vue按需加载组件,异步组件

说实话,我一开始也不知道什么叫按需加载组件,组件还可以按需加载???后来知道了学不完啊...没关系,看我的按需加载组件,或者异步组件,主要是应用了component的

叁歲伎倆/ 2021年11月16日 11:18/ 0 赞/ 512 阅读

相关 react之组件异步加载

我们在用react的时候，希望组件异步加载，提高性能，那么应该怎么实现呢？往下看。。。解释一波： react异步加载的方法很多，这里只说一种，因为这一种直接使用r

女爷i/ 2021年09月19日 08:42/ 0 赞/ 830 阅读

相关 react react-loadable异步组件(按需加载组件)

1、引入 cnpm install --save react-loadable 2、使用 import React f

阳光穿透心脏的1/2处/ 2021年07月24日 20:54/ 0 赞/ 602 阅读