webpackChunkName在Vue配置路由懒加载时的作用

最新推荐文章于 2024-09-24 10:52:10 发布
最新推荐文章于 2024-09-24 10:52:10 发布
阅读量2.5k 收藏 2
点赞数
分类专栏： 初学 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44043130/article/details/121158490
版权

Vue 路由懒加载 webpackChunkName 代码分割 性能优化
关键词由CSDN通过智能技术生成
js 同时被 2 个专栏收录
28 篇文章 0 订阅
订阅专栏
初学
12 篇文章 0 订阅
订阅专栏

在vue的路由懒加载配置时看到了一个webpackChunkName的用法，在引入组件的过程中，通过懒加载分割组件的代码，用chunkName来命名js文件的名称
得到如下效果：
在这里插入图片描述

霜叶w
关注
专栏目录
VUE3.0——路由懒加载、组件懒加载
HarryHY的博客
10-31 3198
路由懒加载 在构建的时候已经给我们做了一个demo了 { path: '/user', name: 'user', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => im
Vue结合webpack实现路由懒加载和分类打包
weixin_39205240的博客
06-20 4369
Vue项目中路由设置一般会引入组件，然后使用。但是这会造成项目一次加载很多组件，影响响应时间。解决这个问题就可以使用路由的懒加载。有三种方法可以实现：export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component:r=>require.ensure([],(...
webpack 中比较难懂的几个变量名称
qwtt24的博客
03-22 438
webpack中有几个比较难懂的变量名称，可能对刚开始学习的人不是很友好，所以今天小邹就整理了一下，主要是做一个总结性的概括。 webpack 中比较难懂的几个变量名称 1.webpack 中，module，chunk 和 bundle 的区别是什么？ 首先我们来看一张图： 看这个图就很明白了： 对于一份同逻辑的代码，当我们手写了一个个的文件，它们无论是 ESM 还是 commonJS 或是 AMD，他们都是 module； 当我们写的 module 源文件传到 webpack 进行打包时，webpa
【webpack】webpack打包之坑 _ webpackChunkName:
SunPeng的博客
06-07 1831
【webpack】webpack打包之坑 _ webpackChunkName:
Webpack 中的 chunk
最新发布
前端小白的博客
09-24 346
定义：Chunk 是 Webpack 在构建过程中生成的一个或多个文件的集合。每个 chunk 可以包含一个或多个模块。目的：通过将代码分割成多个 chunks，可以实现按需加载（懒加载），减少初始加载时间，提升应用性能。
在 vue 路由懒加载中给 Webpack Chunks 命名
VITAMIN的博客
04-22 2368
最早的路由定义方式 import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' import About from '../views/About.vue' import Login from '../views/Login.vue' Vue.use(VueRoute...
webpack的chunkFilename详细说明
前端精髓
01-25 6604
你知道chunkFilename的作用吗？了解之前，先了解懒加载，动态导入的功能。 通常，一个网页会有自身的侧重点： 1、假如你在 YouTube 上加载一个视频页面，你更关心的肯定是视频而不是评论。所以，这里视频就比评论重要。 2、又比如你在一个新闻网站看一篇文章，你更关心的肯定是文章的文字而不是广告。所以，这里文字就比广告重要。 上面的这些情况，都可以通过优先下载最重要的部分，稍后懒加载剩余部分，从而来提升页面首次加载的性能。在 webpack 中，使用 import() 函数即可实现。 let btn
vue 路由
qq_46653211的博客
11-11 273
1.初始写法 非懒加载 import Index from "@/components/index" const router = new Router({ routes: [ { path: '/', name: 'Index' component: Index, } ] }) 2.懒加载 { path
webpackChunkName的注释到底是什么
qq_45432996的博客
06-26 1万+
今天拉下来一个别人的项目,很有意思的是发现了很有意思的注释: 作用就是webpack在打包的时候，对异步引入的库代码（lodash）进行代码分割时（需要配置webpack的SplitChunkPlugin插件），为分割后的代码块取得名字 import异步加载的写法实现页面模块lazy loading懒加载（Vue中的路由异步加载）： Vue中运用import的懒加载语句以及webpack的魔法注释，在项目进行webpack打包的时候，对不同模块进行代码分割，在首屏加载时，用到哪个模块再加载哪个模块，实现懒
如何定义Vue打包文件夹下生成的js文件名【设置webpackChunkName】
The limits of your knowledge are the limits of your world
05-25 1728
如何定义Vue打包文件夹下生成的js文件名【设置webpackChunkName】
vue实现路由懒加载的3种方法示例
10-14
Vue 路由懒加载是优化前端应用性能的关键技术之一，它允许我们在用户实际访问某个路由对应的组件时才进行加载，而不是一次性加载所有资源。这样可以显著提高初始加载速度，尤其是对于大型应用而言，可以避免首页加载...
vue路由懒加载的实现方法
08-27
vue路由懒加载是指在vue项目中，根据路由的变化来动态加载相应的组件，以提高页面的加载速度和用户体验。以下是vue路由懒加载的实现方法： 1. 动态组件：使用动态import语法来定义代码分块点，可以将不同的路由对应...
vue-路由的懒加载
Cupid
08-18 127
路由的懒加载 懒加载也叫延迟加载，即在需要的时候进行加载，随用随加载。在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。 非按需加载则会把所有的路由组件块的js包打在一起。当业务包很大的时候建...
vue的路由
m0_58368794的博客
12-30 171
vue的路由
Webpack打包之坑 _ webpackChunkName【魔法注释】
热门推荐
Mr.小灰狼_随笔
04-03 1万+
Webpack打包之坑 _ webpackChunkName【魔法注释】 目录 事件起因 百度查阅 webpackChunkName 结束了
vue-router和webpack懒加载，页面性能优化篇
weixin_34226182的博客
01-04 495
在vue单页应用中，当项目不断完善丰富时，即使使用webpack打包，文件依然是非常大的，影响页面的加载。如果我们能把不同路由对应的组件分割成不同的代码块，当路由被访问时才加载对应的组件（也就是按需加载），这样就更加高效了。——引自vue-router官方文档 如何实现？？ vue异步组件 vue-router配置路由，使用vue的异步组...
Vue+Webpack使用规范
chunmanxi1749的博客
01-21 245
本文首发于TalkingCoder，一个有逼格的程序员社区。转载请注明出处和作者。 写在前面 本文为系列文章，总共分四节，建议按顺序阅读： 《Vue+Webpack使用规范》 《Vue+Webpack开发可复用的单页面富应用教程（配置篇）》 《Vue+Webpack开...
【Vue】路由vue-router详解
Ryoujou的博客
09-24 799
Vue-Router入门教学详解
vuerouter路由懒加载
08-13
路由懒加载可以将页面组件按需加载，而不是在初始加载时一次性加载所有组件。这样可以减少初始加载时间，并在用户导航到相应路由时动态加载所需的组件。 要实现路由懒加载，你可以使用动态导入（Dynamic Import）的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

霜叶w

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值