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

8.9更新:之前想搬迁到csdn的时候由于邀请码问题迟迟没把博客转过来,所以跑去博客园了,今天发现csdn已经帮我把文章搬过来,有必要修正一下这篇文章。

写这篇文章的时候因为刚接触vue,所以捣鼓的时候有些迷糊。

----------------/*以下可以跳过*/-----------------

本来很简单的事情折腾好久。

1.vue文档只给出了Vue.component('comp_name',function(resolve,reject){})在回调里ajax加载组件定义内容的例子,但现在习惯.vue文件写组件,在点击路由获取.vue的时候怎么弄呢?

2.webpack的coding-split支持commonjs/amd语法,即有不同的实现。网上查了n多案例乱七八糟的,最后确定两种写法

commonjs语法:const setting = resolve => require.ensure([], ()=> resolve(require('./components/setting.vue')),'setting');

文档的写法:resolve =>require(['./components/setting.vue')],resolve);//懒加载

当时我是结合了路由一起练习,用的第一种,在github上看到的,require.ensure是webpack的语法,在打包的时候将require.ensure部分指定的代码切割出来打包在另一个chunk上,webpack.config.js里面加上chunkFileName项即可。require.ensure的三个参数分别是:依赖的url,回调,自定义的chunk的名字。

其实,code split本质上就是,将你require的模块单独出来另外打包,等用到的时候再由浏览器发起异步获取,并通过scriptdom的形式插入到head中,这是它的底层实现。我自己尝试的时候,每获取一次异步组件,head中都会插入两个标签,一个script,yigestyle,因为.vue文件最终会解析成html,css和js。

PS:其实webpack官网的示例代码并没有resolve=>这种写法,直接在函数里require.ensure就是了,一开始有点疑惑,网上找不到讲解,自己研究发现require.ensure这个函数,webpack打包编译之后

是一个_webpack_require_.e的函数,其本身是一个一个thenable实例,require.ensure的回调放到_webpack_require_.e.then(fn)里面,这下子就很明显了,webpack的这个语法本身应该是一个promise实例,只是上面获取vue组件的写法里,因为require.ensure是封装好的语法,只好把resolve传入其父函数中,在require.ensure的回调里通过作用域链获取并调用。这也揭露了,resolve函数不一定要在promise的函数参数中,其出现位置可以灵活设置,在阮一峰老师的ES6入门里提到过,resolve函数是js引擎能提供的,不需要自己部署。

------------------/*以上可跳过*/------------------

首先,异步组件的使用没刚接触时以为的那么复杂。

1.如果套用官网的方式是可以的:

HTML:

<input type="button" @click="showchild" value="show"> //点击按钮后,show为真,先获取child组件,再渲染div内容
<div id="contain" v-if="show">
 <child></child>
 </div>

JS:

//...
data () {
  return {
   msg: 'Welcome to Your Vue.js App',
   show:false
  }
 },
 methods: {
  showchild:function(){
   this.show=true;
   }
 },
 components: {
   'child': function(resolve) {
    require(['./components/child.vue'], resolve);
 }

*注意:加载异步组件的时候,组件名后边的.vue不要忽略。

这个例子应该比较直观了。点击按钮之后改变了变量show的布尔值为真,由于child.vue是异步组件,所以会先ajax获取组件然后渲染。

在很多情况下异步组件会配合vue-router使用来切换视图,其实这时候用哪种语法的都可以。

以上这篇vue+webpack实现异步组件加载的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Vue异步组件使用详解

    Vue的异步组件,供大家参考,具体内容如下 1.前置要求 建议使用webpack: Browserify在默认情况下不支持: 2.用法解释 首先上官网说明:异步组件 虽然说明是没问题的,但是示例中的写法怪怪的,不符合一般新手学习者在实际使用中的习惯. 嗯,换句话说,这段代码告诉你,通过这种方式引入异步组件,然后他漏掉了一些内容,比如说赋值,如何使用之类. [1]官方示例代码: Vue.component('async-webpack-example', function (resolve) {

  • Vue.js中用webpack合并打包多个组件并实现按需加载

    前言 随着移动设备的升级.网络速度的提高,用户对于web应用的要求越来越高,web应用要提供的功能越来越.功能的增加导致的最直观的后果就是资源文件越来越大.为了维护越来越庞大的客户端代码,提出了模块化的概念来组织代码.webpack作为一种模块化打包工具,随着react的流行也越来越流行. 使用 Vue 开发项目时,如果要使用其单文件组件特性,必然要使用 webpack 或者 browserify 进行打包,对于大型应用,为了提升加载速度,可以使用 webpack 的 code split 功能

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

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

  • webpack+vue.js实现组件化详解

    简介 在vue中实现组件化用到了vue特有的文件格式.vue,在每一个.vue文件就是一个组件,在组件中我们将html,css,js全部写入,然后在webpack中配置vue-loader就可以了. 建立vue组件 在src目录下建立components文件夹,并在其中建立app.vue文件,这样我们项目的目录结构如下: |--dist //webpack打包后生成的文件夹 | |--build.js |--node_modules //项目的依赖所在的文件夹 |--src //文件入口 | |

  • webpack+vue.js快速入门教程

    前言 vuejs--轻量.学习成本低.双向绑定.无dom的操作.组件的形式编写 vuejs是个轻量级的mvvm框架, 集合了angular的基本功能,却又比angular更为精简,功能上涵盖了双向绑定.指令.逻辑控制.过滤器.事件监听.函数等.框架的特点使得项目 在状态变更.分页的场景下可以拥有很大的便利--所有的操作只需要变更数组,没有任何的dom操作. webpack--CommonJS的引用和编写方式.loader非常的丰富,包括vue-loader.css-loader.less-loa

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

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

  • PhotoSwipe异步动态加载图片方法

    在开发搜房家居M站的时候,搜房家居装修效果图相册展示效果需要用到PhotoSwipe插件来显示图片. 特点: 1. 家居提供的接口,每次只能获取一张图片 2. 装修效果图的张数不限. 3. 从PhotoSwipe用法来看,在PhotoSwipe初始化前必须把所有图片列出.  instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options ); 标签a是PhotoSwipe初始化前的, 之后

  • vue+webpack实现异步加载三种用法示例详解

    1.第一例 const Home = resolve => { import("@/components/home/home.vue").then( module => { resolve(module) } } 注:(上面import的时候可以不写后缀) export default [{ path: '/home', name:'home', component: Home, meta: { requireAuth: true, // 添加该属性可以判断出该页面是否需要

  • Vue异步组件处理路由组件加载状态的解决方案

    vue.js 组件 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 在大型单页面应用中,处于对性能的考虑和首屏加载速度的要求,我们一般都会使用webpack的代码分割和vue-router的路由懒加载功能将我们的代码分成一个个模块,并且只在需要的时候才从服务器加载一个模块. 但是这种解决方案也有其问题,当网络环境较差时,我们去首次访问某个路由模块,由于加载该模块的资源需要一定的时间,那么该段时间内,我们的应用就会处于无响应的状态,

  • Vue中的异步组件函数实现代码

    具体代码如下所示: export default new Router({ routes: [ { path: '/live', name: 'live', component: () => import('@/view/live/live.vue') } ] }) 上面的代码是很常见的router代码分割,只在代码路由为live才会去加载live.vue 但这样在live.vue获取的过程将是一片空白,什么也没有,体验不好, 利用vue提供的异步组建可以解决 新建一个 loadable.vue

  • 解决vue动态路由异步加载import组件,加载不到module的问题

    报错信息应该是这样的 webpackEmptyContext (eval at ./src/store/modules sync recursive (0.js:10), <anonymous>:2:10) 路由信息由后端给出,那么前端需要动态加载路由,同时component的路径也是后端给出,但是动态加载该路径会报错 如: // 假如path = '@/views/user' const com = () => import(path) // 这样会报错哦 const com2 = (

  • Vue SSR 组件加载问题

    Node 端渲染提示 window/document 没有定义 业务场景 首先来看一个简单的 Vue 组件 test.vue <template> <div> <h2>clientHeight: {{ clientHeight }} px </h2> </div> </template> <script type="text/babel"> export default { data(){ return

  • 将Vue组件库更换为按需加载的方法步骤

    本文介绍了将Vue组件库更换为按需加载的方法步骤,分享给大家,具体如下: 按需加载DEMO仓库地址 背景 我司前端团队拥有一套支撑公司业务系统的UI组件库,经过多次迭代后,组件库体积非常庞大. 组件库依赖在npm上管理,组件库以项目根目录的 index.js 作为出口导出,文件中导入了项目中所有的组件,并提供组件安装方法. index.js import Button from "./button"; import Table from "./table"; imp

  • Vue3异步数据加载组件suspense的使用方法

    目录 前言 创建组件 总结 前言 Vue3 增加了很多让人眼前一亮的特征,suspense 组件就是其中之一,对处理异步请求数据非常实用,本文通过简单的实例介绍其使用方法,如对其有兴趣,可以参阅官方文档. 通常组件在正确呈现之前需要执行某种异步请求是很常见的,通常是通过设计一种机制开发人员按照机制处理这个问题,有很多很好的方法实现这个需求. 例如,从一个 API 异步获取数据,并希望在获取响应数据解析完时显示一些信息,如 loading 效果,在Vue3中可以使用 suspense 组件来执行这

  • Vue Router根据后台数据加载不同的组件实现

    目录 实际项目中遇到的需求 有一些不好的实现方式 个人感觉比较好的实现方式 功能已实现,但我又开始了新的思考 最终方案--高阶组件 实际项目中遇到的需求 同一个链接需要加载不同的页面组件.根据用户所购买服务的不同,有不同的页面展现. 有一些不好的实现方式 直接把这几个组件写在同一个组件下,通过v-if去判断.如果这么做的话,甚至可以不使用vue-router,直接把所有组件,都写在一个文件里面,全部通过v-if判断,也是可行的.(前提是几万行代码一起,你不嫌麻烦的话) 在渲染这个链接的时候,直接

随机推荐