文章目录
一文大白话讲清楚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模式下默认值，属于一个可读的名称的ID
- natural:安装数字顺序使用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
