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') }

以上就是本次介绍的全部知识点内容，感谢大家的学习和对我们的支持。

赞 (0)

相关推荐

  • 教你搭建按需加载的Vue组件库(小结)

    按需加载的原理 按需加载,本质上是把一个组件库的不同组件 拆分成不同文件 ,按照需要引用对应的文件,而该文件暴露一个 install方法 ,供Vue.use使用. 比如:我只想引用element库里的一个Button组件 import Button from 'element-ui/lib/Button.js' import Button from 'element-ui/lib/theme-chalk/Button.css' Vue.use(Button); 上面的写法比较繁琐,而且需要知道每

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

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

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

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

  • iview在vue-cli3如何按需加载的方法

    iview在官方文档上,对于使用脚手架vue-cli3的项目的使用只有一句话:"我们为最新的 Vue CLI 3 提供了相应的 iView 插件,如果你正在用 Vue CLI 3,可以直接在插件中搜索 iview,安装插件来使用." 老实说,第一次看到这说明,我是懵逼的--废话不多说,直接撩起袖子撸 vue-cli3有个命令vue ui打开添加插件搜索 vue-cli-plugin-iview,点击安装 按需加载安装后,vue-cli-plugin-iview会自动帮我们做好以下的配置

  • vue按需加载实例详解

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

  • React 悬浮框内容懒加载实例详解

    目录 界面隐藏 懒加载 React实现 原始代码 放入新的DIV 状态设置 样式设置 事件设置 事件优化 延迟显示悬浮框 悬浮框内容懒加载 完整代码 界面隐藏 一个容器放置视频,默认情况下 display: none; z-index: 0; transform: transform3d(10000px, true_y, true_z); y轴和z轴左边都是真实的(腾讯视频使用绝对定位,因此是计算得到的),只是将其移到右边很远的距离. 懒加载 React监听鼠标移入(获取坐标) 添加事件监听 o

  • vue如何动态加载组件详解

    目录 使用场景: 需要动态导入组件的页面 核心组件的代码: 使用场景: 总结 使用场景: 项目中需要我们根据不同的业务需求呈现不同的业务场景,如果业务类型简单还好,直接全部引入判断即可,但随着我们代码的沉积,项目将会变得很难维护,这时候我们可以使用动态引入组件的方式来避免这个问题,首先第一步实现就是,在vue中,我们如何动态引入组件? 话不多说,直接上干货 需要动态导入组件的页面 在这个页面引入我们的组件Test <template> <div> <Test :data=&q

  • Vue lazyload图片懒加载实例详解

    Vue lazyload图片懒加载实例详解

    文档:https://github.com/hilongjw/vue-lazyload 1.安装 cnpm i vue-lazyload -S 或 npm i vue-lazyload -S 2.实例 导入配置等操作 src/main.js import Vue from 'vue' import App from './App' import router from './router' //[1]导入懒加载 import VueLazyload from 'vue-lazyload' Vue

  • iscroll.js滚动加载实例详解

    滚动加载是个好东西,可以解决一次加载过多的尴尬,其实就是变相的分页,总结下这个轮子的用法,挺简单的. 首先是html结构: <div class=" saleRecord panelList clear" style="position:relative;height:400px;"> <div id="wrapper"> <div id="scroller"> <ul id=&quo

  • PyTorch模型保存与加载实例详解

    目录 一个简单的例子 保存/加载 state_dict(推荐) 保存/加载整个模型 保存加载用于推理的常规Checkpoint/或继续训练 保存多个模型到一个文件 使用其他模型来预热当前模型 跨设备保存与加载模型 总结 torch.save:保存序列化的对象到磁盘,使用了Python的pickle进行序列化,模型.张量.所有对象的字典. torch.load:使用了pickle的unpacking将pickled的对象反序列化到内存中. torch.nn.Module.load_state_di

  • vue前端性能优化之预加载和懒加载示例详解

    目录 预加载 图片预加载 JS预加载 js的加载方式 preload prefetch Preload & Prefetch 的区别 不同资源加载的优先级规则 懒加载 图片懒加载 路由懒加载 组件懒加载 最后 预加载 预加载简单来说就是将所有所需的资源提前请求加载到本地,这样后面在需要用到时就直接从缓存取资源:我们使用该技术预先告知浏览器,等下某些资源可能要被使用,先把资源下载下来,不要等使用的时候再下载,可以看出这样的加载技术会增加服务器的压力,但是用户的体验会比较好,因为可以较快的看到后面的

  • Android LayoutInflater加载布局详解及实例代码

    Android  LayoutInflater加载布局详解 对于有一定Android开发经验的同学来说,一定使用过LayoutInflater.inflater()来加载布局文件,但并不一定去深究过它的原理,比如 1.LayoutInflater为什么可以加载layout文件? 2.加载layout文件之后,又是怎么变成供我们使用的View的? 3.我们定义View的时候,如果需要在布局中使用,则必须实现带AttributeSet参数的构造方法,这又是为什么呢? 既然在这篇文章提出来,那说明这三

  • Android  LayoutInflater加载布局详解及实例代码

    Android  LayoutInflater加载布局详解 对于有一定Android开发经验的同学来说,一定使用过LayoutInflater.inflater()来加载布局文件,但并不一定去深究过它的原理,比如 1.LayoutInflater为什么可以加载layout文件? 2.加载layout文件之后,又是怎么变成供我们使用的View的? 3.我们定义View的时候,如果需要在布局中使用,则必须实现带AttributeSet参数的构造方法,这又是为什么呢? 既然在这篇文章提出来,那说明这三

  • Vue openLayers实现图层数据切换与加载流程详解

    Vue openLayers实现图层数据切换与加载流程详解

    目录 openlayers介绍 一.实现效果预览 二.代码实现 openlayers介绍 OpenLayers是一个用于开发WebGIS客户端的JavaScript包.OpenLayers 支持的地图来源包括Google Maps.Yahoo. Map.微软Virtual Earth 等,用户还可以用简单的图片地图作为背景图,与其他的图层在OpenLayers 中进行叠加,在这一方面OpenLayers提供了非常多的选择.OpenLayers采用面向对象方式开发. OpenLayers 是一个专

随机推荐