webpackChunkName的注释到底是什么

最新推荐文章于 2024-10-21 15:07:37 发布
最新推荐文章于 2024-10-21 15:07:37 发布
阅读量1.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打包的时候，对不同模块进行代码分割，在首屏加载时，用到哪个模块再加载哪个模块，实现懒加载进行页面的优化

喔烨鸭
关注
Webpack按需加载打包chunk命名的方法
12-13
前言 最近，遇到复杂h5页面开发，为了优化H5首屏加载速度，想到使用按需加载的方式，减少首次加载的JavaScript文件体积，于是将处理过程在这里记录一下，涉及到的主要是以下三点： 使用Webpack如何做按需加载 filename和chunkFilename的区别 如何命名chunk的名称(webpackChunkName) 1 使用Webpack如何做按需加载 大家都知道Webpack是现在流行的前端打包编译工具，通过模块之间的依赖关系，将代码打包组织到一起。Webpack目前已经到v4.x，不同版本版支持按需加载的方式不同，主要有两种： webpack1.x 中提供了
webpackChunkName在Vue配置路由懒加载时的作用
霜叶的博客
11-22 2537
webpackChunkName打包时定义的chunkName
webpack
2302_80406801的博客
09-22 768
webpack是一个构建工具,实现了模块化管理项目.他的工作方式是用各种loader将各种资源转化为js文件或者对js文件进行压缩编译亦或对静态资源进行处理.
【webpack】webpack打包之坑 _ webpackChunkName:
SunPeng的博客
06-07 1831
【webpack】webpack打包之坑 _ webpackChunkName:
webpackChunkName
一呀一转转圈
04-15 3805
/*webpackChunkName:"register"*/ 代码分隔出来的js文件名 constRegister=lazy(()=>import(/*webpackChunkName:"register"*/'./views/register'));
Webpack打包之坑 _ webpackChunkName【魔法注释】
热门推荐
Mr.小灰狼_随笔
04-03 1万+
Webpack打包之坑 _ webpackChunkName【魔法注释】 目录 事件起因 百度查阅 webpackChunkName 结束了
webpack的chunkFilename详细说明
前端精髓
01-25 6604
你知道chunkFilename的作用吗？了解之前，先了解懒加载，动态导入的功能。 通常，一个网页会有自身的侧重点： 1、假如你在 YouTube 上加载一个视频页面，你更关心的肯定是视频而不是评论。所以，这里视频就比评论重要。 2、又比如你在一个新闻网站看一篇文章，你更关心的肯定是文章的文字而不是广告。所以，这里文字就比广告重要。 上面的这些情况，都可以通过优先下载最重要的部分，稍后懒加载剩余部分，从而来提升页面首次加载的性能。在 webpack 中，使用 import() 函数即可实现。 let btn
vue技术交流群（864583465）Vue项目用webpack打包后显示文件名(魔法注释)
JCAL123的博客
07-24 1016
Vue项目用webpack打包后显示文件名(魔法注释) 修改 output output: { path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash].js'), chunkFilename: utils.assetsPath('js/[name].[chunkhash].js') }, 在路由或组件中找到懒加载组件的component { path: 'home', na
webpack中打包 webpackchunkname自定义名称
08-31
我们可以在import语句中使用注释的方式来自定义chunk的名称。例如，我们有一个文件A.js，我们可以这样来导入它： ```javascript import(/* webpackChunkName: "myChunk" */ './A.js'); ``` 这样，打包后生成的...
使用 webpack 代码分割和魔术注释提升应用性能
与其临渊羡鱼,不如退而结网
02-01 929
1. Web 应用性能优化的关键 关于 Web 应用性能优化，有一点是毫无疑问的：「页面加载越久，用户体验就越差」。我们几乎可以说 Web 应用性能优化的关键之处就在于：减少页面初载时，所需加载资源的「数量」和「体积」。 那么当所需加载的资源数量到达多少或资源体积小于多少，我们才可以自信地宣称我们的 Web 应用拥有出色的性能呢？下面是给出的一些参考值，该参考值考虑到了移动端与国外等多种访问环境： 页面初载时，所有未压缩的 JavaScript 脚本大小：<=200KB； 页面初载时，所有未压
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',
通过SplitChunks，webpackChunkName对代码分割以及mini-css-extract-plugin分离css代码的实践
xiaoliliaq的博客
05-11 1098
通过SplitChunks，webpackChunkName对代码分割以及mini-css-extract-plugin分离css代码的实践 需环境 开始之前，请各位给自己电脑安装一下Nodejs，具体安装方法这里我就不做讲解了，各位可以移步Node官网查看文档然后对应系统版本进行安装，以下是我的Node or Npm版本 { "engines": { "node": "10.16.0", "npm": "6.9.0" } } 目录结构 . ├── dist ├── node_mo...
import ... from '!!...;感叹号的作用是什么，怎么描述这种引入方式
09-14
/* webpackChunkName: "lodash" */ /* webpackMode: "lazy" */ 'lodash' ) ``` 这里的感叹号并没有出现在导入语句的末尾，而是在注释中使用，以便于Webpack解析这些指令。 如果你是想询问在某个特定的编程环境...
webpack打包实现自定义chunkName名称
最新发布
SUNSHINEBOYLUO
10-21 983
前端 打包 webpack 自定义chunkName 自定义生成的文件名
Webpack 中的 chunk
前端小白的博客
09-24 346
定义：Chunk 是 Webpack 在构建过程中生成的一个或多个文件的集合。每个 chunk 可以包含一个或多个模块。目的：通过将代码分割成多个 chunks，可以实现按需加载（懒加载），减少初始加载时间，提升应用性能。
【Webpack动态加载打包chunk命名】
u012632105的博客
02-16 445
webpack动态加载打包chunk命名 - js-coder - 博客园
webpack动态加载打包chunk命名
aojianzhong5810的博客
09-20 3000
最近，遇到复杂h5页面开发，为了优化H5首屏加载速度，想到使用按需加载的方式，减少首次加载的JavaScript文件体积，于是将处理过程在这里记录一下，涉及到的主要是以下三点： 使用Webpack如何做按需加载 filename和chunkFilename的区别 如何命名chunk的名称(webpackChunkName) 1 使用Webpack如何做按需加载 大家都知...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值