vue 组件异步加载方式(按需加载)

目录
  • 组件异步加载(按需加载)
    • 1.使用() => import()
    • 2.使用resolve => require([’./_account’], resolve)
    • 3. 使用Webpack 的内置语句：import(*)
    • 4. require.ensure：
  • 怎么实现组件异步加载
    • 1.什么是异步组件
    • 2.为什么需要异步加载组件
    • 3.异步加载组件方法

组件异步加载(按需加载)

有时候打包出来的js文件过大，严重影响访问速度，这个时候我们就不得不考虑相关方法来提速，毕竟这可是会影响浏览量的。

如果只是针对这个问题的话，我们可以考虑以下两方面：

  • nignx开启gzip、缓存。
  • 文件再次拆分-异步加载

下面就主要说以下vue组件异步加载的方法：（测试所用的webpack：^4.12.0）

1.使用() => import()

代码：

打包：

界面效果：

2.使用resolve => require([’./_account’], resolve)

代码：

3. 使用Webpack 的内置语句：import(*)

代码：在tabs的change事件中按需加载

4. require.ensure：

require.ensure(['./tab0.vue'], () => { resolve(require('./tab0.vue')) }, ‘tab0')

怎么实现组件异步加载

1.什么是异步组件

即只在组件需要渲染的时候进行加载渲染并缓存。

2.为什么需要异步加载组件

当项目功能越来越多，所包含的子组件也越来越多，导致页面加载，访问速度过慢，所以需要优化页面加载的性能。

3.异步加载组件方法

(1) 可以使用懒加载，即 () => import ( 地址)

关于路由懒加载：VUE：实现路由懒加载

(2) 使用require

代码演示:

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue路由组件按需加载的几种方法小结

    1. 普通加载 使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hello' import Boy from '@/components/Boy' import Girl from '@/components/Girl' 这样做的结果就是webpack在npm run build的时候会打包成一个整个的js文件,如果页面一多,会导致这个文件非常大,加载缓慢,为了解决这个问题

  • vue实现按需加载组件及异步组件功能

    说实话,我一开始也不知道什么叫按需加载组件,组件还可以按需加载???后来知道了 学不完啊...没关系,看我的 按需加载组件,或者异步组件,主要是应用了component的 is 属性 template中的代码: 这里的每一个按钮,都要显示不同的组件,所以我让他们使用了同一个方法名 <template slot-scope="scope"> <el-button type="text" size="mini" @click=&qu

  • Vue组件开发之异步组件详解

    Vue组件开发之异步组件详解

    目录 一.引入 二.vue中的异步组件 三.异步组件和suspense 总结 一.引入 我们在讲异步组件之前,我们再来回顾一下webpack打包时的分包操作.我们可以使用import()异步加载模块来实现分包操作.import函数的返回值是一个Promise,所以我们可以使用then进行下一步处理. 如下图所示为打包后的文件目录,因为我们如果同步加载math.js文件,此时就不存在中间的文件,此时当浏览器请求资源时,就会很慢. 二.vue中的异步组件 通过上面的webpack配置我们明白了为什么

  • vue+webpack实现异步组件加载的方法

    8.9更新:之前想搬迁到csdn的时候由于邀请码问题迟迟没把博客转过来,所以跑去博客园了,今天发现csdn已经帮我把文章搬过来,有必要修正一下这篇文章. 写这篇文章的时候因为刚接触vue,所以捣鼓的时候有些迷糊. ----------------/*以下可以跳过*/----------------- 本来很简单的事情折腾好久. 1.vue文档只给出了Vue.component('comp_name',function(resolve,reject){})在回调里ajax加载组件定义内容的例子,但

  • vue 组件异步加载方式(按需加载)

    vue 组件异步加载方式(按需加载)

    目录 组件异步加载(按需加载) 1.使用() => import() 2.使用resolve => require([’./_account’], resolve) 3. 使用Webpack 的内置语句:import(*) 4. require.ensure: 怎么实现组件异步加载 1.什么是异步组件 2.为什么需要异步加载组件 3.异步加载组件方法 组件异步加载(按需加载) 有时候打包出来的js文件过大,严重影响访问速度,这个时候我们就不得不考虑相关方法来提速,毕竟这可是会影响浏览量的. 如

  • vue 组件异步加载方式(按需加载)

    vue 组件异步加载方式(按需加载)

    目录 组件异步加载(按需加载) 1.使用() => import() 2.使用resolve => require([’./_account’], resolve) 3. 使用Webpack 的内置语句:import(*) 4. require.ensure: 怎么实现组件异步加载 1.什么是异步组件 2.为什么需要异步加载组件 3.异步加载组件方法 组件异步加载(按需加载) 有时候打包出来的js文件过大,严重影响访问速度,这个时候我们就不得不考虑相关方法来提速,毕竟这可是会影响浏览量的. 如

  • 基于vue和react的spa进行按需加载的实现方法

    基于vue和react的spa进行按需加载 由于最近打算将所有的管理系统采用同一套登陆方法,然后在登陆后进行系统的切换选择,不需要每个系统都去重新登陆一次,所以前端这边思考将所有的系统用一套spa的应用进行构建,但是各个系统的合并之后,打包后的代码应该是相当大的,单页需要一次性加载所有系统的资源,显得不合实际,所以打算将不同系统的资源进行分离,再选择后在加载该系统的相应资源.自己发现这个业务和每个系统的路由比较类似,因此将系统的配置基于vue-router或者react-router的基础进行按

  • vue组件（全局，局部，动态加载组件）

    说说Vue.js组件 什么是组件:组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. vue组件有两种,一种是全局组件,一种是局部组件.整个项目经常用到的用全局写法,用到比较少的专供特定页面用的使用局部组件. one----全局组件引入写法:在项目的main.js中: 第一种,在main.js直接写template:' 模版字符串

  • vue组件间通信六种方式（总结篇）

    前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示,A 和 B.B 和 C.B 和 D 都是父子关系,C 和 D 是兄弟关系,A 和 C 是隔代关系(可能隔多代). 针对不同的使用场景,如何选择行之有效的通信方式?这是我们所要探讨的主题.本文总结了vue组件间通信的几种方式,如props. $emit / $on .vuex. $parent / $children . $attrs

  • vue组件传值的实现方式小结【三种方式】

    vue组件传值的实现方式小结【三种方式】

    本文实例讲述了vue组件传值的实现方式.分享给大家供大家参考,具体如下: 前言 vue的组件传值分为三种方式:父传子.子传父.非父子组件传值 引用官网的一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递 父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息,如下图所示: 下面我们就开始用代码(一言不合就上代码)详细的介绍vue组件传值的三种方式 1.父传子 子组件的代码: <template> <div id="container"&

  • 浅谈vue项目优化之页面的按需加载(vue+webpack)

    浅谈vue项目优化之页面的按需加载(vue+webpack)

    通过vue写的单页应用时,可能会有很多的路由引入.当打包构建的时候,javascript包会变得非常大,影响加载.如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应的组件,这样就更加高效了.这样会大大提高首屏显示的速度,但是可能其他的页面的速度就会降下来.结合Vue的异步组件和webpackde code splitting feature,轻松实现路由组件的懒加载. 就像图片的懒加载一样,如果客户根本就没有看到那些图片,而我们却在打开页面的时候全部给加载完了,这

  • vue 组件通信的多种方式

    vue 组件通信的多种方式

    目录 前言 一.vuex 二.eventBus 三.props/emit 四.$parent/$children 五.$attrs/$listeners 六.provide/inject 前言 在vue中,​ 组件的关系不外乎以下三种: 组件是需要通信的,在开发中,常用到的通信方式有:vuex.eventBus.以及props与emit.$parent与$children,除此之外,还有provide与inject.$attrs与$listeners等. 一.vuex 这个相信大家用的很多了,简

  • require.js 加载 vue组件 r.js 合并压缩的实例

    require.js 加载 vue组件 r.js 合并压缩的实例

    准备: vue.js 原本是学习vue组件 require.js 然后想到用require 加载 r.js 文件太多 合并 文件目录 忽略部分文件及文件夹 一.先说vue 组件 先引入vue 再引入vue组件 Vue.extend({}) 定义组件 template data methods Vue.component(),注册组件的标签,标签在html中是一个挂载点 new Vue() 进行实例化 index.html // css引入 略 <div id="header"&g

  • vue按需加载实例详解

    vue-router配置路由,使用vue的异步组件技术,可以实现按需加载.这种方式下一个组件生成一个js文件 用例: { path: '/promisedemo', name: 'PromiseDemo', component: resolve => require(['../components/PromiseDemo'], resolve) } es提案的import() (推荐) webpack官方文档:webpack中使用import() vue官方文档:路由懒加载(使用import()

随机推荐