vue项目实现按需加载的3种方式
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: Hellocomponent: resolve => require.ensure([], () => resolve(require('../components/Hello')), 'demo')
}
[转载] https://segmentfault.com/a/1190000011519350 侵删
转载于:https://www.cnblogs.com/huyifei/p/10210787.html
vue项目实现按需加载的3种方式相关推荐
- vue中路由按需加载的几种方式
使用vue-cli构建项目后,我们会在Router文件夹下面的index.js里面引入相关的路由组件,如: import Hello from '@/components/Hello' import ...
- vue-router 按需加载的 3 种方式
下列 3 种方式均可将组件打包成单文件异步加载 vue 异步 es 提案的 import webpack 的 require.ensure vue 异步 {path: '/promisedemo',n ...
- vue项目实现路由按需加载(路由懒加载)的3种方式
vue项目实现路由按需加载(路由懒加载)的3种方式 1.vue异步组件 2.es提案的import() 3.webpack的require,ensur *1.vue异步组件技术 ==== 异步加载 v ...
- react项目如何按需加载antdDesign组件
react项目如何按需加载antdDesign组件分为两种情况: 第一种手写的,不使用脚手架: 1.安装: npm install ant --save 2.引用: import { Alert, F ...
- vue项目中 img标签加载失败方法,onerror事件的两种方法
vue项目中 img标签加载失败方法 ?css 第一种方法 第二种方法 本人写的第一篇文章,希望对你有帮助 第一种方法 < img src="123" :οnerrοr=&q ...
- vue项目中 img标签加载失败(404)方法,@error事件
vue项目中 img标签加载失败方法,@error事件 @error="defImg" <img src="123" @error="defIm ...
- IDEA中Tomcat重新加载的几种方式
IDEA中Tomcat重新加载的几种方式 参考自IDEA官方帮助文档 1.Update resources 更新资源文件,当项目中的HTML, JSP, JavaScript, CSS and ima ...
- hbase 协处理器 部署_HBase协处理器加载的三种方式
本文主要给大家罗列了hbase协处理器加载的三种方式:shell加载(动态).api加载(动态).配置文件加载(静态).其中静态加载方式需要重启hbase. 我们假设我们已经有一个现成的需要加载的协处 ...
- Cesium加载模型两种方式
Cesium加载模型两种方式 代码如下 <!DOCTYPE html> <html><head><meta charset="UTF-8" ...
最新文章
- 巨杉数据库通过“Mpp数据库基础能力认证”,权威技术认证金融级数据库
- Octavia 创建 loadbalancer 的实现与分析
- html5变动标签新写法,Html5新标签解释及用法
- 企业实施ERP有哪些收益分析-要做到心中有数
- iMpACT中的Xilinx Prom烧录
- Python入门--字符串的查询操作,find,rfind,index,rindex
- Fragment学习(二): 管理Fragment和Fragment通讯
- vue-router小案例-后台管理路由
- 谈谈MATLAB大数据处理
- ❀论文篇 ❀ 2010-2022,情绪识别(EmotionRecognition)论文
- 讲讲传奇架设教程跟传奇开区教程,我们首先要明白传奇如何形成
- [AHK]在当前目录中运行DOS命令行--DosHere
- 20154312 曾林 Exp3 免杀原理与实践
- Java 的历史和版本
- 多易教育KAFKA实战(3)-java消费者客户端API示例代码
- 品牌舆情监测系统简介,品牌舆情监测及应对方案?
- Linux下查看隐藏文件夹
- 〖Python 数据库开发实战 - Python与MySQL交互篇⑮〗- 项目实战 - 实现新闻管理 - 删除新闻功能
- 高度近视患者担心视网膜脱落,是不是杞人忧天?
- 比赛难度(HDU4546)
热门文章
- Codeforces 930 A. Peculiar apple-tree (dfs)
- mongodb存入mysql_关于mongodb转存MySQL
- DRAM,SRAM,SDRAM的关系与区别
- 手机壳鸿蒙,手机壳黑榜发布 真相太惊人!
- 收费标准_互联网推广收费标准
- OpenVINO安装之安装openCL
- 嵌入式Linux基础学习笔记-文件IO编程-文件锁(2)
- [BUUCTF-pwn]——pwn1_sctf_2016
- M2Eclipse:Maven Eclipse插件无法搜索远程库的解决方法
- 美国次级贷款来龙去脉