面试题：Webpack代码分离之中等难度：如何使用Webpack进行基础的代码分离

Question

在前端项目中，使用Webpack进行代码分离是提升加载性能的重要手段。请描述如何通过Webpack的splitChunks插件，将项目中的第三方库（如lodash）和业务代码进行分离打包，同时说明这种分离对项目加载性能有哪些提升。

Answer 1

1. 使用splitChunks插件分离第三方库和业务代码

在Webpack配置文件（通常是webpack.config.js）中，配置splitChunks插件来实现代码分离。示例如下：

module.exports = {
  //...其他Webpack配置
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/](lodash)[\\/]/,
          name:'vendors',
          chunks: 'all'
        }
      }
    }
  }
};

上述配置中：

• chunks: 'all' 表示对所有类型的chunk（入口chunk、异步chunk等）都进行代码分割。
• cacheGroups 用于定义缓存组，这里定义了一个名为vendor的缓存组。
• test 正则表达式用于匹配需要分离的模块，这里匹配node_modules目录下的lodash库。
• name 指定分离出来的文件名称为vendors（打包后的文件名会根据具体配置规则生成，如vendors.[contenthash].js）。
• chunks: 'all' 再次强调对所有chunk都应用此缓存组规则。

2. 这种分离对项目加载性能的提升

• 并行加载：第三方库和业务代码分离成不同的文件，浏览器可以并行加载这些文件，充分利用网络带宽，加快整体的加载速度。例如，在一个高带宽的网络环境下，浏览器可以同时请求vendors.js和main.js，而不是按顺序等待一个文件加载完成再加载另一个。
• 缓存复用：第三方库通常相对稳定，不经常变化。将其分离打包后，浏览器可以缓存这个单独的vendors.js文件。当项目更新业务代码时，只要第三方库版本未变，vendors.js依然可以从缓存中读取，无需重新下载，大大减少了用户访问更新后项目的加载时间。比如，多次访问使用了lodash库的不同项目，只要lodash库版本一致，都可以复用缓存的vendors.js。
• 减少初始加载体积：业务代码可能在不同页面或功能模块有差异，但第三方库往往是通用的。将第三方库分离后，初始加载时只需要加载业务代码相关的文件，减少了初始加载的文件体积，加快首屏渲染速度。例如，一个单页应用，首次加载时只加载必要的业务代码，后续再按需加载第三方库，能让用户更快看到页面内容。