精华内容
下载资源
问答
  • 背景: 目前我们项目都是按组件划分的,然后各个组件之间封装成产品。目前都是采用iframe直接嵌套页面。...目前采用Vue动态加载异步组件的方式来实现小组件之间的通信。当然门户也要提供一个通信的基线:Vu
  • Vue 异步加载组件

    2019-07-17 15:17:02
    VUE2组件加载浅析 VUE+Webpack 实现懒加载的三种方式 路由懒加载 Vue官方写法 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export function createRouter () { return new Router({...

    文章参考

    1. VUE2组件懒加载浅析
    2. VUE+Webpack 实现懒加载的三种方式
    3. 路由懒加载

    问题描述

    在工作中,要实现一个‘打印’的功能,结果打印内容显示出来大概需要40秒。
    由于我是做的单页面,代码打包之后大概有8M左右的样子,因此浏览器会先加载这8M的代码,然后根据逻辑和CSS渲染出需要打印的页面,对浏览器来说非常耗资源(CPU和内存),因此,采取的优化方式是对组件采用异步加载的方式

    Vue异步加载组件API

    Vue.component('async-example', function (resolve, reject) {
      setTimeout(function () {
        // 向 `resolve` 回调传递组件定义
        resolve({
          template: '<div>I am async!</div>'
        })
      }, 1000)
    })
    

    全局注册加载组件 AMD规范

    Vue.component('async-webpack-example', function (resolve) {
      // 这个特殊的 `require` 语法将会告诉 webpack
      // 自动将你的构建代码切割成多个包,这些包
      // 会通过 Ajax 请求加载
      require(['./my-async-component'], resolve)
    })
    

    全局注册加载组件 commonjs(CMD)写法

    Vue.component(
      'async-webpack-example',
      // 这个 `import` 函数会返回一个 `Promise` 对象。
      () => import('./my-async-component')
    )
    

    局部注册加载组件

    new Vue({
      // ...
      components: {
        'my-component': () => import('./my-async-component')
      }
    })
    

    Vue官方写法

    import Vue from 'vue'
    import Router from 'vue-router'
    Vue.use(Router)
    export function createRouter () {
      return new Router({
        mode: 'history',
        routes: [
          { path: '/', component: () => import('./components/Home.vue') },
          { path: '/item/:id', component: () => import('./components/Item.vue') }
        ]
      })
    }
    

    commonjs写法

    import Vue from 'vue'
    import Router from 'vue-router'
    Vue.use(Router)
    export function createRouter () {
      return new Router({
        mode: 'history',
        routes: [
          { path: '/', component: resolve => require(['./components/Home.vue'],resolve) },
          { path: '/item/:id', component: resolve => require(['./components/Item.vue'],resolve) }
        ]
      })
    }
    

    使用建议

    建议使用Vue官方推荐的使用方法,如果对第二种commonJS写法不理解,就需要了解Nodejs中require的用法

    展开全文
  • vue异步加载组件

    2019-07-23 17:30:12
    1、通常我们这样加载组件, import JobNumInformation from "@/components/views/order-center/orderlist/JobNumInformation" 然后在components中注册下,这样我们就可以在当前页面使用这个组件了 components{ ...

    1、通常我们这样加载组件,

    import JobNumInformation from "@/components/views/order-center/orderlist/JobNumInformation"

    然后在components中注册下,这样我们就可以在当前页面使用这个组件了

    components{

    JobNumInformation

    }

    2、延迟加载组件:在我们要使用组件时才加载该组件

    使用() => import('JobNumInformation from "@/components/views/order-center/orderlist/JobNumInformation"')替代前面示例中的import JobNumInformation from "@/components/views/order-center/orderlist/JobNumInformation"。Vue一旦请求渲染将会延迟加载该组件。 

    展开全文
  • vue异步加载组件问题

    2020-08-31 10:50:00
  • Vue异步加载组件(报错)

    千次阅读 2019-04-19 17:15:30
    异步加载组件: 报错:Syntax Error: Unexpected token (10:25) 8 | el: ‘#app’, 9 | components: { 10 | ‘example’: () => import(’./components/example’) | ^ 11 | } 1...

    异步加载组件:
    在这里插入图片描述
    在这里插入图片描述
    报错:Syntax Error: Unexpected token (10:25)

    10 | ‘example’: () => import(’./components/example’)
    | ^

    解决办法:
    1.安装babel 插件:npm install --save-dev babel-plugin-syntax-dynamic-import
    2.在根目录创建.babelrc文件,添加上面的插件在这里插入图片描述

    展开全文
  • 主要给大家介绍了关于Vue动态组件异步组件原理的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
  • Vue异步引导模态演示 一个Vue.js异步引导模式演示。 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run ...
  • } </style> 方法二 使用Vue.extend实现异步加载组件 这种方式生成的vue实例虽然可以通过propsData传参, 但实例没有parent, 没有上下文, 但不能实现双向绑定, 可以通过直接调用实例方法或者实例事件的方式通讯 ...
  • 下面小编就为大家分享一篇vue+webpack实现异步组件加载的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue 组件异步加载实践

    千次阅读 2018-09-02 13:18:00
    1,使用vue异步组件,可以将复杂页面的框架代码和子组件代码拆开,优先加载框架代码,显著提高页面加载速度; 2,组织复杂页面的代码时,可以考虑对于打开首屏时不需要渲染的子组件,使用`v-if`控制其只在需要的时候...
  • vue—如何异步加载组件 1》通常来讲我们在a组件里引入b组件时, 这样引入就可以了,属于同步加载组件 2》当我们引入一个超大的组件时候就可以用异步加载,什么时候用,什么时候加载,可以提高性能。 <abc v-if...
  • 大家都知道当使用时才装入需要的组件,可以有效的提高首次...比如在路由切换时,下面这篇文章主要给大家介绍了关于如何实现一个简单的Vue异步组件的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下。
  • Vue异步加载about组件

    2020-08-28 23:28:18
    主要为大家详细介绍了Vue异步加载about组件的相关方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 先看下这个static目录下的css文件夹和js文件夹,打包的时候...如果app.js超过1MB,就要用异步组件实现按需加载,需要哪个组件,就发送请求去加载哪一个组件的js代码。 修改import的书写方式,即可实现按需加载。 ...
  • vue-router异步加载组件

    2020-07-16 16:49:48
    当我们开发vue+webpack项目时,可能会发现打包出的项目js过大,严重影响了首屏页面的访问速度,这就需要利用vue路由的异步加载组件功能。 异步加载组件 在页面路由配置js文件中,避免在开头直接引入相关组件,当...
  • Vue.js之组件异步加载

    2018-09-08 16:06:51
    此时,我们就需要使用组件异步加载,即进入对应的组件时,只加载核心组件、代码和对应的组件代码。 通过vue-router和webpack实现 需要插件支持: babel-plugin-syntax-dynamic-import import ...
  • 2. 为什么需要异步加载组件? 当项目功能越来越多,所包含的子组件也越来越多,导致页面加载,访问速度过慢,所以需要优化页面加载的性能。 3. 异步加载组件方法 可以使用懒加载,即 () => import ( 地址) 关于...
  • 认为写的代码没有毛病,但是出现了这个错误,然后看到这个文章https://www.cnblogs.com/qcwblog/p/8074511.html说是由于组件异步加载出现的问题,因此我将异步组件换成了全局引入import ... from ... 然后在运行...
  • 主要介绍了解决vue动态路由异步加载import组件,加载不到module的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue.js 组件 组件(Component)是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素,封装可重用的代码。 在大型单页面应用中,处于对性能的考虑和首屏加载速度的要求,我们一般都会使用webpack的代码分割和vue-...
  • vue异步组件原理

    千次阅读 2020-03-17 16:21:26
    vue 中支持的异步组件的用法 //回调函数 Vue.component('async-webpack-example', function (resolve) { // 这个特殊的 `require` 语法将会告诉 webpack // 自动将你的构建代码切割成多个包,这些包 // 会通过 ...
  • 5、vue 使用异步加载模块 import() { path: '/', name: 'index', component: () => import('@view/test/index.vue'), mate: { title: '' } }, 复制代码如果我们直接这样使用,webpack 编译时就会报错,是...
  • 说明:本组件可以直接解析.vue文件,为了支持less语法解析,在组件中引入less.js,可在less官网下载。 组件代码 <template> <div class="remote"> <component :is="currentView" v-bind="$...
  • vue 组件异步加载(按需加载)

    万次阅读 2018-11-05 20:42:27
    有时候打包出来的js文件过大,严重影响访问速度,这个时候我们就不得不...下面就主要说以下vue组件异步加载的方法:(测试所用的webpack:^4.12.0) 1.使用() =&gt; import() 代码: 打包: 界面效果: 2.使...
  • 一、 什么是懒加载加载也叫延迟加载,即在需要的时候进行加载,随用随载。 二、为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会...三、如何与webpack配合实现组件加载 1、在

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 21,201
精华内容 8,480
关键字:

vue异步加载组件

vue 订阅