面试题答案
一键面试chunks
- 作用：用于指定哪些chunk需要进行代码分割。它有三个取值：
'initial'（初始chunk，即入口chunk）、'async'（异步chunk，通过动态导入等方式加载的chunk）、'all'（所有chunk）。 - 优化策略：如果只想对异步加载的模块进行代码分割，可设置为
'async'，这样能更好地实现异步模块的按需加载，提升性能；若想对所有模块包括初始加载的模块都进行分割，可设置为'all'。
minSize
- 作用：规定被提取出来的chunk的最小大小（单位为字节）。只有当模块或模块组大小超过这个值时，才会被提取为一个单独的chunk。
- 优化策略：设置合适的
minSize可以避免生成过多过小的chunk，减少请求数量和额外开销。比如，如果设置过小，可能会导致大量微小的chunk，增加网络请求次数；设置过大，则可能无法有效分割代码。一般可根据项目实际情况从几百字节到几千字节进行调整。
minChunks
- 作用：指定模块被提取为公共chunk前，必须被多少个chunk所包含。
- 优化策略：通过合理设置
minChunks可以确保提取的公共chunk确实是多个模块共用的部分。例如设置为2，意味着只有被至少两个chunk包含的模块才会被提取出来，避免将一些仅在个别地方使用的模块提取到公共chunk中，从而优化代码结构和加载性能。
maxAsyncRequests
- 作用：限制按需加载（异步加载）时，同时加载的最大请求数。
- 优化策略：设置合理的值能避免在异步加载时一次性发起过多请求，导致网络拥塞。例如在移动端网络环境下，可适当降低这个值，以保证加载的稳定性和流畅性。
maxInitialRequests
- 作用：限制入口点（initial chunk）加载时，同时加载的最大请求数。
- 优化策略：控制初始加载时的请求数量，防止过多请求影响页面首屏加载速度。比如在首屏加载时，减少初始请求数有助于快速呈现页面内容。
name
- 作用：用于指定提取出来的chunk的名称。可以是字符串，也可以是函数形式动态生成名称。
- 优化策略：设置有意义的名称有助于区分和管理不同的chunk，方便调试和维护。例如以功能模块命名，使得代码结构更加清晰。
cacheGroups
- 作用：允许定义多个缓存组，每个缓存组可以有自己独立的
chunks、minSize、minChunks等配置，以更细粒度地控制代码分割。 - 优化策略：可以根据不同类型的模块（如第三方库、业务通用模块等）定义不同的缓存组。比如将所有的第三方库放在一个缓存组，通过设置合适的配置项，将其提取为一个单独的文件，实现浏览器缓存，提高加载性能。