6.3.2 默认的异步提取-Webpack实战：入门、进阶与调优(中)

当前位置:　首页>> 技术小册>> Webpack实战：入门、进阶与调优(中)

6.3.2 默认的异步提取

在Webpack的世界中，代码分割（Code Splitting）是一种优化技术，它允许你将代码分割成多个bundle，并在需要时按需加载这些bundle。这对于提升大型应用的加载速度和性能至关重要。Webpack提供了多种实现代码分割的方式，其中，默认的异步提取（Default Async Chunking）是入门时最直观且常用的方法之一。本章节将深入探讨Webpack如何默认处理异步模块的加载，以及如何通过配置进一步优化这一过程。

6.3.2.1 理解异步提取的基本原理

在Webpack中，异步提取通常依赖于动态导入（Dynamic Imports）来实现。动态导入允许你将某些模块的加载推迟到实际需要时，而不是在页面加载时立即加载。这通过JavaScript的import()函数实现，该函数返回一个Promise，该Promise在模块加载完成后解析为该模块。

Webpack在解析到import()语句时，会自动识别出这是一个异步加载点，并据此生成一个或多个新的chunk（即分割后的代码块），这些chunk将包含import()语句所请求的模块及其依赖。当这些模块被实际需要时，Webpack将负责从服务器加载对应的chunk。

6.3.2.2 配置Webpack以支持默认的异步提取

在Webpack 4及以上版本中，默认已经内置了对代码分割的支持，无需额外插件（如之前的CommonsChunkPlugin或SplitChunksPlugin的前身）。然而，你仍然可以通过webpack.config.js中的配置来微调分割策略，以确保资源得到最有效的利用。

基本配置示例：

默认情况下，Webpack会根据模块间的依赖关系自动进行分割。但你可以通过optimization.splitChunks配置来进一步控制分割行为。以下是一个基本的配置示例，展示了如何启用和配置默认的异步提取：

module.exports = {
  // 其他配置...
  optimization: {
    splitChunks: {
      chunks: 'all', // 可以是 'async', 'initial' 或 'all'
      minSize: 20000, // 最小分割体积（以字节为单位）
      maxSize: 0, // 最大分割体积，默认为0，表示无限制
      minChunks: 1, // 被至少n个chunk共享时才分割
      maxInitialRequests: 3, // 入口点处的并行请求数
      automaticNameDelimiter: '~', // 生成名称时使用的分隔符
      enforceSizeThreshold: 50000, // 强制分割前达到的体积阈值
      cacheGroups: {
        default: false, // 禁用默认的缓存组
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        // 你可以添加更多的cacheGroups来自定义分割逻辑
      },
    },
  },
};

注意：在上面的配置中，chunks: 'all'表示无论是初始加载还是异步加载的chunk，Webpack都会尝试进行分割。然而，对于默认的异步提取，我们主要关心的是异步加载的场景，因此在实际应用中，可能更倾向于将chunks设置为'async'以专注于优化异步加载的性能。

6.3.2.3 深入理解Cache Groups

splitChunks.cacheGroups是splitChunks配置中最为强大和灵活的部分，它允许你定义一组规则，以精细控制哪些模块应该被打包到同一个chunk中。

默认缓存组：在上面的配置中，我们禁用了默认的缓存组（default: false）。这是因为Webpack默认会尝试将所有非node_modules中的模块打包到一个共享的chunk中，这在某些情况下可能不是你想要的行为。
自定义缓存组：通过添加自定义的cacheGroups，你可以根据模块路径、名称或其他属性来定义分割策略。例如，上面的vendors缓存组将所有来自node_modules的模块打包到一个单独的chunk中，这对于缓存第三方库非常有用。

6.3.2.4 优化异步提取的性能

虽然Webpack的默认异步提取已经相当高效，但仍有一些策略可以帮助你进一步优化性能：

合理设置分割大小：通过调整minSize、maxSize和enforceSizeThreshold等参数，确保生成的chunk既不过大也不过小，从而避免不必要的网络请求和加载时间。
利用HTTP/2的服务器推送：如果你的服务器支持HTTP/2，可以利用其服务器推送特性来预加载重要的异步chunk，进一步减少页面加载时间。
使用CDN加速：将生成的chunk部署到CDN上，可以缩短用户到资源的物理距离，从而加快加载速度。
懒加载非关键资源：确保只有用户真正需要的资源才会被加载，避免加载不必要的代码。
监控和分析：使用Webpack Bundle Analyzer等工具来分析生成的bundle，找出可以进一步优化的地方。

6.3.2.5 结论

默认的异步提取是Webpack中代码分割的基础，它允许你以声明式的方式实现按需加载，从而显著提升大型应用的性能和用户体验。通过合理配置optimization.splitChunks，你可以进一步优化分割策略，确保资源得到最有效的利用。此外，结合其他性能优化策略，如HTTP/2的服务器推送、CDN加速等，可以进一步提升应用的加载速度和响应能力。在开发过程中，不断监控和分析应用的性能表现，是持续优化和提升用户体验的关键。