面试题：Webpack代码分离之中等难度：常见代码分离策略及应用场景

Question

请列举Webpack中至少两种代码分离的策略，并分别阐述它们适用的应用场景。

Answer 1

• Entry Points：
  • 适用场景：适用于多页应用（MPA）。例如一个大型网站，有多个相互独立的页面模块，如首页、产品页、新闻页等。每个页面有自己独立的业务逻辑和资源需求，通过为每个页面创建单独的entry point，可以确保每个页面仅加载其所需的代码，避免不同页面间代码的冗余加载，提高页面加载性能。
• SplitChunksPlugin：
  • 适用场景：
    • 提取公共代码：在单页应用（SPA）或多页应用中，当多个模块有共同依赖时适用。比如多个页面都使用到了jQuery库，使用SplitChunksPlugin可以将jQuery等公共依赖提取出来，生成单独的chunk，多个页面共享该chunk，减少整体代码体积，提高加载效率。
    • 按需加载异步模块：对于大型单页应用中一些不常用但又必须存在的功能模块，如用户设置中的高级功能，平时用户很少使用。可以使用SplitChunksPlugin将这些模块异步拆分出来，当用户需要使用该功能时再按需加载，提升应用的初始加载速度和用户体验。