Q1.1 webpack 里 Module、Chunk、Bundle、Asset 分别是什么，有什么区别
A:
- Module（模块）
- 是 webpack 中最小的单位，一个文件就是一个模块
- 可以是任何类型的文件（.js、.css、.png等）
- 通过 import/require 等语句， 会创建 模块间的依赖关系
- Chunk（代码块）
- 是 webpack 打包过程中的 中间产物
- 一个 chunk 由 一个/多个模块 组成
- webpack内部 会根据配置，形成不同的 chunk：
- 每个 entry 配置的入口文件，会划分为一个单独的 chunk
- import()动态导入的模块，会划分为一个单独的 chunk
- splitChunks代码分割的配置项，会影响 chunk 的分割
- Bundle（打包文件）
- 是 webpack 打包过程中的 最终产物
- 一般情况下，一个 chunk 会生成一个 bundle
- bundle 是最终输出的 可部署的 文件
- Asset（资源）
- 是 webpack 5 中引入的概念
- 表示最终输出的文件，包括 bundle 和 其他资源文件（如图片、字体等）
- 可以通过 asset modules 配置来处理
它们之间的关系是：
Module(源文件) --> Chunk(打包过程) --> Asset(输出文件)，包括 Bundle 和 其他资源文件(图片/字体等)
5.1 用代码举例说明：
// 入口文件 index.js (Module)
import './style.css' // Module
import './image.png' // Module
// 经过webpack处理后
// 可能形成一个包含这些模块的 main chunk
// 最终输出为 main.bundle.js (Bundle/Asset)
// 以及 image.png (Asset)
5.2 Bundle vs Asset 的区别
- Bundle: 特指 JavaScript 打包后的文件
- Asset: 是更广泛的概念，包括所有类型的输出文件（JS bundles、图片、字体、CSS等）
5.3 webpack5引入Asset概念的原因
- 配置简化: 不需要配置多个 loader
- 性能优化: 内置的资源处理更高效
- 更好的类型支持: 统一的资源模块类型系统
- 更精细的控制: 可以更容易地 控制资源的 输出方式
Q2.1 Webpack 中的运行时chunk 是什么？在项目工程中， 如何打包和加载这个 运行时chunk
A:
- 什么是 runtimeChunk
- runtimeChunk 是 webpack 在打包过程中生成的一段代码，用于在浏览器中 加载和管理其他模块
- 可以把它看作是一个 “引导程序”(bootstrap)
- runtimeChunk 的作用
- 模块加载: runtimeChunk 包含了模块加载机制，确保应用程序的各个模块能够 正确加载和执行
- 模块解析: 提供模块解析的公共方法，确保模块之间的依赖关系 能够正确处理
- 模块缓存: 它管理模块的缓存，以提高性能，避免重复加载
- 异步加载: 支持动态导入和异步加载模块，提升应用的响应速度
- 为什么要配置/引入 runtimeChunk
- 优化缓存: 把 运行时代码 分离成独立的 runtimeChunk，可以更好地利用浏览器缓存。因为运行时代码 通常变化不大，而应用代码可能频繁更新
- 提升性能: 通过分离运行时代码，减少主应用代码的体积，加快初始加载速度
- 代码分割: 在使用代码分割时，runtimeChunk 负责协调不同 chunk 的加载和执行
- 配置 runtimeChunk 的方法
// webpack.config.js
module.exports = {
optimization: {
// 通过这种配置，webpack 会把 运行时代码提取到一个单独的文件中
// 通常命名为 runtime.js, 从而 更好地 管理 和 优化
runtimeChunk: 'single' // 或者使用 { name: 'runtime' }
}
}
- runtimeChunk 的加载策略
- runtimeChunk 必须在其他 chunk 之前加载
- 通常在 HTML 中的加载顺序是：
- runtime chunk
- vendor chunk (第三方库)
- 应用代码 chunks
<!-- 加载顺序 -->
<script src="runtime.js"></script>
<script src="vendor.js"></script>
<script src="main.js"></script>
