面试题：Webpack代码分割之中等难度：常用代码分割方法

Question

在Webpack中，列举至少两种常用的代码分割方法，并简述每种方法的适用场景。

Answer 1

• Entry Points：
  • 适用场景：适用于多页应用（MPA）场景。当项目中有多个独立的页面，每个页面有自己独立的逻辑和资源时，通过配置多个 entry 入口，可以将不同页面的代码分开打包，每个入口对应的代码及其依赖会被单独打包成一个文件，这样不同页面加载时，只会加载自己所需要的资源，避免不必要的代码加载。
• 动态导入（Dynamic Imports）：
  • 适用场景：适用于实现按需加载的场景。例如在单页应用（SPA）中，某些功能模块不是在页面初始加载时就需要的，而是在用户进行特定操作（如点击某个按钮）后才需要使用。这时使用动态导入（如import('./module.js').then(module => { /* 使用 module */ })），可以将这些模块代码分割出来，只有在需要时才加载，从而优化首屏加载时间，提高用户体验。
• SplitChunksPlugin：
  • 适用场景：适用于提取公共代码。当项目中有多个模块依赖了相同的第三方库或一些公共代码片段时，使用 SplitChunksPlugin 可以将这些公共代码提取出来，单独打包成一个文件。这样多个页面或模块在加载时，可以共享这些公共代码，减少重复代码的加载，提高缓存利用率，进而提升整体性能。