您现在的位置是:首页 > Javascript
当前栏目
vue实现路由懒加载几种方式
2023-02-25 18:20:43 时间
一、为什么需要路由懒加载
vue在项目打包之后,会生成一个dist文件夹。在dist文件夹里面又有一个js/app.js文件,这里主要存放的是整个项目的业务逻辑代码。随着项目不断的开发迭代,业务逻辑越来越多,app.js文件也会越来越大。在线上就会容易出现进入首页时所需时间过长或者出现白屏的问题。
使用路由懒加载可以分割代码,提高初始页的加载效率。
二、路由懒加载的方式
1、使用ES6的import ( ) –推荐使用
const 组件名 = ( ) => import(‘组件路径’)
(下面代码,没有指定webpackChunkName,每个组件打包成一个js文件)
const home = () => import('../view/home')
(下面代码,指定了相同的webpackChunkName名’testDom‘,会合并打包成一个js文件)
const home = () => import(/* webpackChunkName: 'testDom' */ '../view/home')
const login= () => import(/* webpackChunkName: 'testDom' */ '../view/login')
2、使用vue异步组件resolve
const 组件名 = resolve => require([‘组件路径’],resolve)
(这种情况下一个组件生成一个js文件)
const home = resolve => require(['../view/home'],resolve)
3、webpack提供的require.ensure( )
这种模式也可以通过参数中的webpackChunkName将js分开打包。 const 组件名 = resolve => require.ensure([], () => resolve(require(‘组件路径’)), ‘webpackChunkName’)
const home = resolve => require.ensure([], () => resolve(require('../view/home')), 'testDom')
相关文章
- JavaScript
- Detalk.js —— 具有高自定义性、简洁、轻量的开源评论系统
- 光伏组件IV测试系统
- ZLT-MP v5.5.0 发布
- 前端重新部署如何通知用户刷新网页?
- 真的看不下去了!!!字节的table组件写成啥了!
- 软件开发入门教程网站之TypeScript Array(数组)
- 性能测试|JMeter取样器介绍(三)
- 太强了!外国小哥花16个月用Three.JS打造了一个无缝切地图的3D开车游戏
- Xmake v2.7.3 发布,包组件和 C++ 模块增量构建支持
- react.memo、useMemo、useCallback深入理解
- vue路由守卫
- react event事件订阅传值
- Vue3.0踩坑笔记
- react-context用法
- react组件传值
- react生命周期知识梳理
- js数据类型知识梳理
- js作用域链与预解析
- js浅拷贝与深拷贝