vue实现按需加载

最新推荐文章于 2024-06-21 10:17:25 发布
最新推荐文章于 2024-06-21 10:17:25 发布
阅读量501 收藏 1
点赞数
分类专栏： vue 文章标签： vue按需加载
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq5833547/article/details/84931899
版权

在路由或者组件路经引入时直接在component里写路经像下面这样：

component: () => import('@/pages/home/Home')

这样就能实现按需加载，当然这样是要大型的项目才需要这样，小型的项目这样做反而让项目加载更慢

青年邓先生
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Vue实战】组件基础
Milk~每天分享一点点，技术进步一点点
10-12 310
组件基础 1、组件局部注册的用法 <body> <div id="app"> <!--3.my-component只能在#app下使用--> <my-component></my-component> </div> <script> //1.创建一个组件构造器 var myComponent=Vue.extend({ template:'
vue实现按需加载组件及异步组件功能
10-16
主要介绍了vue实现按需加载组件和异步组件，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
Vue 动态组件 component: ()=>import() 的理解
回纹勾边宝相花团
03-27 5万+
Vue 官方文档：动态组件 & 异步组件 当使用局部注册的时候，你也可以直接提供一个返回 Promise 的函数： new Vue({ // ... components: { 'my-component': () => import('./my-async-component') } }) 问题出处 参考：洞香春：Vue + Vue-router + Elem...
vue3自动导入---组件库elements-ui,vuetify以及scss样式的自动导入
最新发布
I_am_shy的博客
06-21 990
我们在使用第三方组件库和css样式文件时，都需要进行引入，可以在单个组件内单独引用，也可以在全局引入或一次引入所有组件；但是，一般情况下我们都不会全部引入，这会是打包的结果变大，而且往往是不可能用上所有的组件，这个时候就需要。可以看到可以在组件中直接使用scss变量，要注意使用scss应该在style标签上添加lang="scss"属性。vuetify也是一套ui组件，它的风格和组件的动画效果更加生动，但是vuetify的配置会相对麻烦，然后就可以在vue组件中直接使用需要的ui组件。
vue路由实现按需加载的多种方式
黎小小的博客
08-31 1792
异步组件defineAsyncComponent加载不能用在首次展示或者首次重定向的页面。但是使用会报警告：暂时不知道为什么。
【vue其他相关】总结组件和JS的所有引入写法（按需，动态等），原理不定期更新！
庞囧的博客
05-16 2746
例如当一个首屏页面，其中有a组件做了按需引入，我们可以通过浏览器的Network记录查看，他同时拉取首页的资源和a组件单独打包的资源，但是要等首页拉取完毕后才去拉取a组件。使用这种script方式的效果是：当你用v-if渲染子组件或者浏览器浏览到的时候，才会去单独拉取该子组件的打包代码文件，可以通过浏览器的Network记录证实。页面中有较为复杂的组件，导致渲染过久。如果是路由组件做了按需引入怎么理解，其实很好理解，我们最外层不是有个App.vue，这个就相当于路由组件的父组件，所以逻辑和上面说的一样。
vue中vue-router路由懒加载（按需加载）的作用以及常见的实现方法
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
12-06 3796
路由懒加载，也叫延迟加载或按需加载，是在需要的时候进行加载的一种技术。在单页面应用（SPA）中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时需要加载的内容过多，时间过长，会出现长时间的白屏，即使做了loading也不利于用户体验。而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。
Vue按需加载的具体实现
08-28
Vue按需加载的具体实现 Vue按需加载是指在Vue应用中，根据路由加载对应的组件，而不是一次性加载所有组件。这种机制可以减少页面加载时间，提高用户体验。 概念（懒加载） 懒加载是一种优化机制，指的是只有当...
vue按需加载实例详解
10-16
Vue-Router提供了两种方式来实现按需加载： - **通过`resolve`函数结合`require`**： ```javascript {path: '/promisedemo', name: 'PromiseDemo', component: resolve => require(['../components/PromiseDemo'...
vue实现页面加载动画效果
08-29
在上面的代码中，我们使用 `props` 来传递加载动画效果的配置信息，然后使用 `methods` 来实现加载动画效果的逻辑。 最后，我们可以使用 CSS 来设置加载动画效果的样式。例如，以下代码实现了一个基本的加载动画...
vue子组件懒加载（按需加载）
m0_68956554的博客
07-05 1715
vue子组件懒加载（按需加载）
基于script标签引入vue.js
08-21
html页面基于script标签引入vue使用时，将此js放在项目路径中引用即可离线使用vue框架，避免在线引用网络延迟。 具体使用方法可参考我的博客
vue+seajs实现按路由来异步按需加载模板和组件架构
05-28
vue+seajs实现按路由来异步按需加载模板和组件架构
Vue 组件中如何引入外部的js文件 的10种方法
一步一个脚印，踏实努力，向着目标前进
08-30 2万+
原型链扩展，将外部的JavaScript文件扩展到Vue实例的原型链上，适用于多个组件都需要使用外部JavaScript文件的情况。这种方法可以将外部JavaScript文件的方法和属性混入到所有的Vue组件中，使得所有的组件都可以使用这些方法和属性。标签中使用插件的方式异步引入外部的JavaScript文件，适用于需要按需加载外部JavaScript文件的情况。方法，异步引入外部的JavaScript文件，适用于需要按需加载外部JavaScript文件的情况。语句的路径指定具体的文件位置。
vue 按需加载
weixin_45727786的博客
12-30 140
vue按需加载
vue项目实现路由按需加载（路由懒加载）的三种方式
一个前端开发者
07-11 4642
这样做的结果就是webpack在npm run build的时候会打包成一个整个的js文件，如果页面一多，会导致这个文件非常大，加载缓慢，为了解决这个问题，需要将他分成多个小文件，而且还要实现异步按需加载，即用到了再加载，而不用一股脑全部加载，方法有三种：vue-router配置路由，使用vue的异步组件技术，可以实现按需加载。 但是，这种情况下一个组件生成一个js文件。 举例如下： 2. es6提案的import() 推荐使用这种方式(需要webpack > 2.4) webpack官方文档：webpac
vue-router 按需加载
weixin_34148340的博客
11-02 1401
vue的单页面（SPA）项目,必然涉及路由按需的问题。以前我们是这么做的 //require.ensure是webpack里面的，这样做会将单独拉出来作为一个chunk文件 const Login = r => require.ensure( [], () => r (require('../component/Login.vue'))); 但现在vue-router...
2023年最新的Vue全套面试题（含答案）
热门推荐
xm1037782843的博客
03-06 14万+
前端Vue面试题 最新面试题 最全的面试题vue
“约见”面试官系列之常见面试题之第一百零三篇之vue-router实现路由懒加载（建议收藏）
歌谣的博客
10-15 768
vue异步组件 es提案的import() webpack的require,ensure() vue异步组件技术 ==== 异步加载 vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 . 但是,这种情况下一个组件生成一个js文件 /* vue异步组件技术 */ { path: '/home', name: 'home', component: resolve => require(['@/components/home'],resolve)...
vue3 按需加载组件
10-08
在 Vue 3 中，你可以使用动态导入来实现按需加载组件。以下是一种常见的实现方式： 首先，确保你的组件是使用 `import` 语法导入的，而不是直接在模板中使用。 然后，你可以使用 `defineAsyncComponent` 函数来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值