b2b电子商务网站开发网站快速优化排名app

一文大白话讲清楚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采用什么算法
• 有三个常见的值

1. named:development模式下默认值，属于一个可读的名称的ID
2. natural:安装数字顺序使用ID。数字不是固定的，每次构建都会发生变化
3. 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