一文大白话讲清楚webpack基本使用——11——chunkIds和runtimeChunk

文章目录

一文大白话讲清楚webpack基本使用------11------chunkIds和runtimeChunk
[1. 建议按文章顺序从头看，一看到底，豁然开朗](#1. 建议按文章顺序从头看，一看到底，豁然开朗)
[2. 啥是chunkIds](#2. 啥是chunkIds)
- 3.怎么使用chunkIds
- [4. 啥是runtimeChunk](#4. 啥是runtimeChunk)
- [5. 怎么使用runtimeChunk](#5. 怎么使用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模式下默认值，属于一个可读的名称的ID
natural:安装数字顺序使用ID。数字不是固定的，每次构建都会发生变化
deterministic:确定性的，在不同的编译中不变的短数字ID，也就是说，无论你构建多少次，名字都是不变的，这么简单理解

** 在实际开发中，development模式下，我们使用named;production模式下我们使用deterministic **

3.怎么使用chunkIds

在webpack.config.js中的optimization中配置就行

js 复制代码

opptimization:{
    chunkIds:"named"
}

4. 啥是runtimeChunk

配置runtime相关的代码，决定是否将runtime代码单独构建到一个包中去
啥是runtime代码呢，就是在运行环境中，对模块进行解析、加载的代码
还不理解，说具体点，我们上面第八篇文章，讲动态加载的时候，dynamic.js是在通过点击button之后加载来的，谁加再来的呢，就是runtime代码
那为啥要把runtime代码单独构建成包呢
还是涉及到代码分离提高加载速度的问题，如果分离了，及时主代码有变化，runtime代码也不用重新打包请求，不仅优化构建速度还利用缓存优化了加载速度

5. 怎么使用runtimeChunk

在webpack.config.js中的optimization中配置就行

js 复制代码

optimization:{
    runtimeChunk:'single'//single表示将运行时代码提取到一个单独的chunk中去
    //true/multiple,针对每个入口打包一个runtime文件
    //single,--
    //Object,name属性决定runtimeChunk的名称
}

我们配置完以后重新构建一下

js 复制代码

npm run build

-发现构建出了多一个包，就是runtimeChunk