百度网站类型,最好网站开发公司电话,houzz室内设计,店铺设计思路怎么写文章目录 一文大白话讲清楚webpack基本使用——11——chunkIds和runtimeChunk1. 建议按文章顺序从头看#xff0c;一看到底#xff0c;豁然开朗2. 啥是chunkIds3.怎么使用chunkIds4. 啥是runtimeChunk5. 怎么使用runtimeChunk 一文大白话讲清楚webpack基本使用——11——chun… 文章目录 一文大白话讲清楚webpack基本使用——11——chunkIds和runtimeChunk1. 建议按文章顺序从头看一看到底豁然开朗2. 啥是chunkIds3.怎么使用chunkIds4. 啥是runtimeChunk5. 怎么使用runtimeChunk 一文大白话讲清楚webpack基本使用——11——chunkIds和runtimeChunk
1. 建议按文章顺序从头看一看到底豁然开朗
第一篇一文大白话讲清楚啥是个webpack第二篇一文大白话讲清楚webpack基本使用——1——完成webpack的初步构建第三篇一文大白话讲清楚webpack基本使用——2——css相关loader的配置和使用第四篇一文大白话讲清楚webpack基本使用——3——图像相关loader的配置和使用第五篇一文大白话讲清楚webpack基本使用——4——vue-loader的配置和使用第六篇一文大白话讲清楚webpack基本使用——5——babel的配置和使用第七篇一文大白话讲清楚webpack基本使用——6——热更新及其原理第八篇一文大白话讲清楚webpack基本使用——7——代码分离和懒加载第九篇# 一文大白话讲清楚webpack基本使用——8——开发环境和生产环境的配置和区别第十篇一文大白话讲清楚webpack基本使用——9——预加载之prefetch和preload以及webpackChunkName的使用第十一篇一文大白话讲清楚webpack基本使用——10——使用CDN优化加载速度然后看本篇chunkIds和runtimeChunk
2. 啥是chunkIds
chunkIds是optimization配置的一个属性项用于告知webpack模块的id采用什么算法有三个常见的值
named:development模式下默认值属于一个可读的名称的IDnatural:安装数字顺序使用ID。数字不是固定的每次构建都会发生变化deterministic:确定性的在不同的编译中不变的短数字ID也就是说无论你构建多少次名字都是不变的这么简单理解
** 在实际开发中development模式下我们使用named;production模式下我们使用deterministic **
3.怎么使用chunkIds
在webpack.config.js中的optimization中配置就行
opptimization:{chunkIds:named
}4. 啥是runtimeChunk
配置runtime相关的代码决定是否将runtime代码单独构建到一个包中去啥是runtime代码呢就是在运行环境中对模块进行解析、加载的代码还不理解说具体点我们上面第八篇文章讲动态加载的时候dynamic.js是在通过点击button之后加载来的谁加再来的呢就是runtime代码那为啥要把runtime代码单独构建成包呢还是涉及到代码分离提高加载速度的问题如果分离了及时主代码有变化runtime代码也不用重新打包请求不仅优化构建速度还利用缓存优化了加载速度
5. 怎么使用runtimeChunk
在webpack.config.js中的optimization中配置就行
optimization:{runtimeChunk:single//single表示将运行时代码提取到一个单独的chunk中去//true/multiple,针对每个入口打包一个runtime文件//single,--//Object,name属性决定runtimeChunk的名称
}我们配置完以后重新构建一下
npm run build-发现构建出了多一个包就是runtimeChunk
