面试题：Webpack代码分割策略之中等难度：基础代码分割方法

Question

在Webpack中，列举两种常见的代码分割方法，并简要说明它们的适用场景。

Answer 1

1. 动态导入（Dynamic Imports）

• 适用场景：适用于异步加载模块的场景，比如页面中有一些模块在初始渲染时不需要立即加载，而是在用户进行特定操作（如点击某个按钮）时才需要加载。这样可以避免初始加载时加载过多代码，提高页面的加载性能。例如，一个大型Web应用中某些功能模块（如报表生成模块、高级搜索模块），只有特定用户在特定操作下才会使用，使用动态导入可在需要时加载这些模块。

2. SplitChunksPlugin

• 适用场景：主要用于提取多个chunk（代码块）中的公共模块，将公共模块单独打包成一个文件。适用于多个页面或模块之间存在重复依赖的情况，通过提取公共代码，可以减少每个chunk的体积，实现代码复用，提高缓存利用率。比如多个页面都依赖lodash库，使用SplitChunksPlugin可以将lodash提取出来单独打包，这样在加载多个页面时，只要缓存中有这个公共包，就无需重复加载。