webpackChunkName的注释到底是什么

最新推荐文章于 2024-05-18 15:39:18 发布
最新推荐文章于 2024-05-18 15:39:18 发布
阅读量1w 收藏 18
点赞数 5
文章标签： html5 es6 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45432996/article/details/106349875
版权

今天拉下来一个别人的项目,很有意思的是发现了很有意思的注释:
在这里插入图片描述
简单了解:webpackChunkName 是为预加载的文件取别名,作用就是webpack在打包的时候，对异步引入的库代码（lodash）进行代码分割时（需要配置webpack的SplitChunkPlugin插件），为分割后的代码块取得名字

import异步加载的写法实现页面模块lazy loading懒加载（Vue中的路由异步加载）：
Vue中运用import的懒加载语句以及webpack的魔法注释，在项目进行webpack打包的时候，对不同模块进行代码分割，在首屏加载时，用到哪个模块再加载哪个模块，实现懒加载进行页面的优化

喔烨鸭
关注
  • 5
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Webpack按需加载打包chunk命名的方法
12-13
前言 最近，遇到复杂h5页面开发，为了优化H5首屏加载速度，想到使用按需加载的方式，减少首次加载的JavaScript文件体积，于是将处理过程在这里记录一下，涉及到的主要是以下三点： 使用Webpack如何做按需加载 filename和chunkFilename的区别 如何命名chunk的名称(webpackChunkName) 1 使用Webpack如何做按需加载 大家都知道Webpack是现在流行的前端打包编译工具，通过模块之间的依赖关系，将代码打包组织到一起。Webpack目前已经到v4.x，不同版本版支持按需加载的方式不同，主要有两种： webpack1.x 中提供了
webpackChunkName在Vue配置路由懒加载时的作用
霜叶的博客
11-22 2449
webpackChunkName打包时定义的chunkName
程序员佛祖代码注释.txt
09-14
程序员佛祖代码注释，佛祖保佑，代码无BUG
php语言注释，单行注释和多行注释
10-18
主要介绍了php语言注释，单行注释和多行注释,需要的朋友可以参考下
SqlSever 注释符 单行注释与多行注释
09-09
主要介绍了SqlSever 注释符 单行注释与多行注释,需要的朋友可以参考下
Webpack打包之坑 _ webpackChunkName【魔法注释】
热门推荐
Mr.小灰狼_随笔
04-03 1万+
Webpack打包之坑 _ webpackChunkName【魔法注释】 目录 事件起因 百度查阅 webpackChunkName 结束了
【webpack】webpack打包之坑 _ webpackChunkName:
SunPeng的博客
06-07 1142
【webpack】webpack打包之坑 _ webpackChunkName:
webpack动态加载打包chunk命名
aojianzhong5810的博客
09-20 2877
最近，遇到复杂h5页面开发，为了优化H5首屏加载速度，想到使用按需加载的方式，减少首次加载的JavaScript文件体积，于是将处理过程在这里记录一下，涉及到的主要是以下三点： 使用Webpack如何做按需加载 filename和chunkFilename的区别 如何命名chunk的名称(webpackChunkName) 1 使用Webpack如何做按需加载 大家都知...
如何定义Vue打包文件夹下生成的js文件名【设置webpackChunkName】
The limits of your knowledge are the limits of your world
05-25 1414
如何定义Vue打包文件夹下生成的js文件名【设置webpackChunkName】
webpack的chunkFilename详细说明
前端精髓
01-25 6368
你知道chunkFilename的作用吗？了解之前，先了解懒加载，动态导入的功能。 通常，一个网页会有自身的侧重点： 1、假如你在 YouTube 上加载一个视频页面，你更关心的肯定是视频而不是评论。所以，这里视频就比评论重要。 2、又比如你在一个新闻网站看一篇文章，你更关心的肯定是文章的文字而不是广告。所以，这里文字就比广告重要。 上面的这些情况，都可以通过优先下载最重要的部分，稍后懒加载剩余部分，从而来提升页面首次加载的性能。在 webpack 中，使用 import() 函数即可实现。 let btn
Linux2.6.24内核注释
05-29
hi, guys! 这是半年来，在看ULA的过程中，针对Linux 2.6.24内核顺手做的一点注释。内容不多，个人觉得文件系统和USB这两个模块的注释还有一点意思。 所有注释都是中文，您可以与标准2.6.24内核进行比较，看看具体的注释内容。 针对2.6.24注释的时间比较短，内容不多，抱歉，请不要拍砖。更多的注释是针对linux2.6.11.12内核的，您可以通过http://xiebaoyou.download.csdn.net下载，那个版本的注释算是干货。 如果您对内核有兴趣，可以在茶余饭后，无聊之时，访问我的博客 谢宝友 2014-05-29晚于成都
vue 路由懒加载中给 Webpack Chunks 命名的方法
11-21
最早的路由定义方式 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(VueRouter) const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About',
什么时候应该避免写代码注释？
08-03
看到标题，我知道你可能会想：“我为什么要避免代码注释，这难道不是一件好事吗？”。是的，写注释在大多数情况下是有用的。但是，请注意，我说的是“在大多数情况下”，因为有一些情况下，你不应该写注释。
webpack 中，webpackPrefetch、webpackPreload 和 webpackChunkName 的区别是什么呢？
hfdxmz_3的博客
05-19 1134
这几个名词其实都是 webpack魔法注释（magic comments）里的，文档中说了 6 个配置，配置都可以组合起来用。我们说说最常用的三个配置。 3.1 webpackChunkName 前面举了个异步加载lodash的例子，我们最后把output.chunkFilename写死成bundle.js。在我们的业务代码中，不可能只异步加载一个文件，所以写死肯定是不行的，但是写成[name].bundle.js时，打包的文件又是意义不明、辨识度不高的 chunkid。 { ...
webpack中的缓存
weixin_55697644的博客
06-20 784
Tip本指南继续沿用和中的代码示例。以上，我们使用 webpack 来打包我们的模块化后的应用程序，webpack 会生成一个可部署的/dist目录，然后把打包后的内容放置在此目录中。只要/dist目录中的内容部署到 server 上，client（通常是浏览器）就能够访问此 server 的网站及其资源。而最后一步获取资源是比较耗费时间的，这就是为什么浏览器使用一种名为的技术。
webpack性能优化(上)
weixin_34235105的博客
11-23 380
webpack做为一款当下最流行的前端构建工具，一直以来以门槛太高而受人诟病，且没有一个通用的配置适合所有的项目，为此我们不得不开心的(大误:smiley:)手动配置我们的项目，开启我们的配置工程师之路，本文主要是对webpack的一些基础配置的解释和我们能做的一些优化工作，适合有使用过webpack的前端开发者阅读，各位在阅读过程中不妨打开自己的项目来跟着我一起优化。 分割配置文件 dev ...
webpack 5
tianruine的博客
07-11 823
1.在webpack中5个重要的元素2.所有东西都要导出，通过 3.图片的打包通过：url-loader file-loader html-loader 在webpack@5中 通过type='‘accect’ 参数详解 资源目录的自定义 rules配置中增加 generator 配置项 2.3 说明：两种修改方式同时出现时，以generator 为准html文件中引入（html-loader处理） ,这样就能直接在html模板文件引入图片或者css 3.加载css资源（loader的使用
Webpack中 SplitChunks 插件用法详解
細水、長流√的专栏
03-01 2229
SplitChunks 插件是什么呢？简单的来说就是 Webpack 中一个提取或分离代码的插件，主要作用是提取公共代码，防止代码被重复打包，拆分过大的js文件，合并零散的js文件。提到前端优化，提取公共代码是必不可少的手段。在 Webpack 出现前，提取公共代码是人为去处理，而 SplitChunks 插件的作用就是通过配置让 Webpack 去帮你提取公共代码。Webpack创始人的初衷也是希望能有更多时间写更多代码，所以这种纯体力的劳动交给Webpack去完成。
前端基础入门三大核心之HTML篇：构建网页世界的基石与HTML5的魔力
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-18 804
HTML是一种标记语言，它使用一系列标签来描述网页内容的结构和表现形式。这些标签告诉浏览器如何处理和显示文本、图片、视频等网页元素。从最基础的段落、标题到复杂的表格、表单，HTML都能轻松应对。
心电信号注释数据是什么
06-12
心电信号注释数据是指对心电图中QRS波群、ST段、T波等事件进行标注的数据，用于记录和描述这些事件的时刻、类型和属性等信息。在MIT-BIH心电信号数据集中，注释数据是一个包含48个记录的mat文件，每个文件中包含了相应心电信号记录的注释信息。 MIT-BIH心电信号数据集中的注释数据包括以下类型的事件： - N：正常心拍 - L：左束支传导阻滞 - R：右束支传导阻滞 - B：束支传导阻滞 - A：期前收缩 - a：融合波 - J：起始或结束的波 - V：室性早搏 - E：窦性早搏 - F：房性早搏 - f：房性融合波 - N：未分类的早搏 通过对心电信号进行注释，可以帮助医生和研究人员更好地理解和分析心电信号，进而诊断和治疗相关疾病。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值