vue项目实现路由按需加载(路由懒加载)的3种方式

1.vue异步组件
2.es提案的import()
3.webpack的require,ensur

*1.vue异步组件技术 ==== 异步加载
vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .
但是,这种情况下一个组件生成一个js文件*

/* vue异步组件技术 */
{path: '/home',name: 'home',component: resolve => require(['@/components/home'],resolve)
},{path: '/index',name: 'Index',component: resolve => require(['@/components/index'],resolve)
},{path: '/about',name: 'about',component: resolve => require(['@/components/about'],resolve)
}

2.组件懒加载方案二路由懒加载(使用import)

// 下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。
/* const Home = () => import('@/components/home')
const Index = () => import('@/components/index')
const About = () => import('@/components/about') */
// 下面2行代码，指定了相同的webpackChunkName，会合并打包成一个js文件。 把组件按组分块
const Home =  () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home')
const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index')
const About = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/about')

{path: '/about',component: About
}, {path: '/index',component: Index
}, {path: '/home',component: Home
}

3.webpack提供的require.ensure()
vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。
这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。

/* 组件懒加载方案三: webpack提供的require.ensure() */
{path: '/home',name: 'home',component: r => require.ensure([], () => r(require('@/components/home')), 'demo')
}, {path: '/index',name: 'Index',component: r => require.ensure([], () => r(require('@/components/index')), 'demo')
}, {path: '/about',name: 'about',component: r => require.ensure([], () => r(require('@/components/about')), 'demo-01')
}

vue项目实现路由按需加载(路由懒加载)的3种方式相关推荐

【亲测可用→防止入坑Routes】设置angular10项目异步加载、惰性加载、懒加载路由
创建一个带路由的项目,依次执行下面每行代码 ng n RouingApp --routingcd RouingAppng g c components/firstng g c components/s ...
用手机UC浏览器页面打开vue项目，图片，css，js都没加载
用手机UC浏览器页面打开vue项目,图片,css,js都没加载用HBuilder X创建了一个普通的vue项目,在电脑上使用浏览器看没有什么问题,然后提交到了公司的服务器上,发现用手机,除了火狐,谷 ...
webpack v3 结合 react-router v4 做 dynamic import — 按需加载（懒加载)
为什么要做dynamic import? dynamic import不知道为什么有很多叫法,什么按需加载,懒加载,Code Splitting,代码分页等. 总之,就是在SPA,把JS代码分成N个页 ...
webpack v3 结合 react-router v4 做 dynamic import — 按需加载（懒加载）
为什么要做dynamic import? dynamic import不知道为什么有很多叫法,什么按需加载,懒加载,Code Splitting,代码分页等. 总之,就是在SPA,把JS代码分成N个页 ...
【vue】预加载、懒加载
项目场景: 提示:记录: 预加载:会在使用之前,提前加载js文件(等其他资源加载完毕,浏览器空闲了,在偷偷加载资源,适用于pc端)兼容性问题严重,caniuse查看是否使用该技术懒加载:当文件需要使 ...
iframe懒加载_懒加载是如何实现的？
作为网页内容的一部分,图像和视频通常要消耗很多资源加载.要提高网页应用的性能,如何避免资源浪费在加载图像和视频上就很重要了.但是,很多时候我们都不愿意减少网页上的媒体资源,所以我们经常无从下手.幸运的 ...
前端项目分析：我是如何做图片优化的（预加载、懒加载和延迟加载）
众所周知:前端页面上的图片是优化时最重要也是最令人头疼的部分,花费了几个月的时间才优化到令自己满意的一半程度,,,唉,一言难尽啊! 在此将几种方法总结一下,希望能帮到不少人吧- 图片的优化有两种方式: ...
img加载本地图片_图片加载技术-懒加载和预加载
懒加载也就是延迟加载. 具体表现为: 当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张占位图的路径,这样就只需请求一次,只有当图片出现在浏览器的可视区域内时,才设置图片正真的路 ...
html页面预加载图片不出来,页面图片预加载与懒加载策略
在图片的加载策略之前,我们先来了解下html网页中,图片的不同位置的图片分别是在什么时候发起图片资源请求的 img 标签 img标签会在html渲染解析到的时候,如果解析到img src值,则浏览器会 ...
超详细的图片预加载和懒加载教程
最近接手一个项目 . 结果光安装依赖都出现了一堆麻烦 . 好不容易处理完一个 , 又来一个 .头疼啊看到之前有一些预加载的学习笔记.于是又查查找找 ,想想写写把预加载和懒加载的笔记写完整发现制 ...

vue项目实现路由按需加载(路由懒加载)的3种方式

vue项目实现路由按需加载(路由懒加载)的3种方式

vue项目实现路由按需加载(路由懒加载)的3种方式相关推荐

最新文章

热门文章