面试题：Webpack中如何通过代码分割来减小文件体积

Question

在Webpack项目中，阐述使用代码分割减小文件体积的原理，并列举至少两种Webpack实现代码分割的常用方法，且说明每种方法的适用场景。

Answer 1

代码分割减小文件体积的原理

Webpack 通过将代码拆分成多个较小的文件，避免在初始加载时将所有代码都包含进来。这样浏览器只需加载当前页面所需的代码，减少了首次加载的文件大小，提高加载性能。当其他部分代码需要使用时，再按需加载对应的文件。

常用方法及适用场景

1. splitChunks
   • 适用场景：适用于提取多个入口chunk或动态导入chunk中共享的模块。比如在多页应用中，不同页面可能会用到相同的第三方库（如 lodash），通过 splitChunks 可以将这些公共库提取出来，避免重复打包，提高缓存利用率。
2. 动态导入（import()）
   • 适用场景：用于实现按需加载。比如在单页应用中，某些功能模块（如用户登录后的特定操作模块）不是在页面初始化时就需要的，只有当用户触发特定操作（如点击登录按钮后）才需要加载，这时就可以使用动态导入，将这部分代码分割出来，在需要时加载，从而优化初始加载性能。