探讨 `JavaScript` 中的 `Code Splitting` (代码分割) 策略 (`dynamic import()`, `Webpack Split Chunks`) 和性能收益。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

好的，各位前端的弄潮儿们，大家好！今天咱们来聊聊一个让你的网站起飞的秘密武器——代码分割 (Code Splitting)。别害怕，这玩意儿听起来高大上，其实就是把你的代码拆成小块，按需加载，就像拼乐高一样，需要哪个模块就拼哪个，不用一次性把整个城堡都搬过来。

为什么要代码分割？

想象一下，你打开一个网站，结果白屏好久，浏览器吭哧吭哧地加载一个巨大的 JavaScript 文件，这感觉是不是很酸爽？用户体验瞬间跌入谷底。这就是因为我们把所有代码都塞进了一个大包里，一次性全部加载，导致首屏加载时间过长。

代码分割就是为了解决这个问题。它可以帮助我们：

减少首屏加载时间: 只加载用户首次访问页面需要的代码。
提高性能: 避免加载不必要的代码，减少资源消耗。
优化用户体验: 用户可以更快地与页面进行交互。

代码分割的两种主要策略

JavaScript 中主要有两种代码分割的策略：

dynamic import() (动态导入): 这是 ES Module 规范提供的原生方法，可以在运行时动态地加载模块。
Webpack Split Chunks: 这是 Webpack 等构建工具提供的功能，可以根据配置自动地将代码分割成多个 chunk。

接下来，咱们就分别来深入研究一下这两种策略。

1. dynamic import()：按需加载，指哪打哪

dynamic import() 就像一个神奇的传送门，可以让你在需要的时候才加载模块。它的语法非常简单：

async function loadModule() {
  try {
    const module = await import('./my-module.js');
    // 使用 module
    module.default(); // 假设 my-module.js 导出一个默认函数
  } catch (error) {
    console.error('加载模块失败:', error);
  }
}

// 在某个事件触发时调用 loadModule
document.getElementById('myButton').addEventListener('click', loadModule);

在这个例子中，只有当用户点击了 myButton 按钮时，才会加载 my-module.js 模块。这大大减少了初始加载时需要下载的代码量。

dynamic import() 的使用场景

路由级别的代码分割: 不同的路由对应不同的模块，只有当用户访问某个路由时才加载对应的模块。
按需加载组件: 某些组件只有在特定条件下才需要渲染，可以使用 dynamic import() 来延迟加载这些组件。
事件触发的代码分割: 就像上面的例子一样，只有在某个事件触发时才加载对应的模块。

dynamic import() 的优势和劣势

优势	劣势
简单易用，原生支持	需要手动管理模块的加载，可能会比较繁琐
可以精确控制模块的加载时机	对于大型项目，可能需要编写大量的 `dynamic import()` 代码，维护成本较高
适用于简单的代码分割场景	不适合复杂的依赖关系和代码复用场景

一个更完整的路由级别代码分割的例子 (使用 React):

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

// 使用 lazy 函数包裹 dynamic import
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const Contact = lazy(() => import('./pages/Contact'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}> {/* fallback 在加载时显示 */}
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </Suspense>
    </Router>
  );
}

export default App;

在这个例子中，Home, About, Contact 组件都是通过 lazy 函数和 dynamic import() 动态加载的。 Suspense 组件用于在加载过程中显示一个 fallback UI (这里是 "Loading…")。只有当用户访问对应的路由时，才会加载对应的组件，极大地提高了首屏加载速度。

2. Webpack Split Chunks：自动化分割，化繁为简

Webpack 提供了强大的代码分割功能，可以通过配置 splitChunks 选项来自动地将代码分割成多个 chunk。这种方式更加自动化，可以处理复杂的依赖关系和代码复用场景。

Webpack Split Chunks 的配置选项

splitChunks 选项有很多配置选项，可以根据不同的需求进行配置。常见的选项包括：

chunks: 指定要分割的 chunk 类型。可以设置为 all (所有 chunk), async (按需加载的 chunk), initial (初始 chunk)。
minSize: chunk 的最小大小，只有大于这个大小的 chunk 才会进行分割。
maxSize: chunk 的最大大小，如果 chunk 大于这个大小，会被进一步分割。
minChunks: 一个模块至少被多少个 chunk 引用才会进行分割。
maxAsyncRequests: 按需加载时并行请求的最大数量。
maxInitialRequests: 初始加载时并行请求的最大数量。
automaticNameDelimiter: chunk 名称的分隔符。
name: chunk 的名称。
cacheGroups: 缓存组，可以根据不同的条件将模块分组，然后对不同的组应用不同的分割策略。

一个简单的 Webpack Split Chunks 配置例子:

// webpack.config.js
module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'all', // 分割所有类型的 chunk
      cacheGroups: {
        vendors: {
          test: /[\/]node_modules[\/]/, // 匹配 node_modules 中的模块
          priority: -10, // 优先级，数值越大优先级越高
          name: 'vendors', // chunk 名称
        },
        default: {
          minChunks: 2, // 至少被两个 chunk 引用
          priority: -20,
          reuseExistingChunk: true, // 如果已经存在相同的 chunk，则重用
        },
      },
    },
  },
};

在这个例子中，我们将 node_modules 中的模块分割成一个名为 vendors 的 chunk。这样可以避免每次修改业务代码时都重新构建 vendors chunk，提高构建速度。另外，我们还配置了 default 缓存组，将至少被两个 chunk 引用的模块分割成一个独立的 chunk，提高代码复用率。

Webpack Split Chunks 的使用场景

提取公共依赖: 将多个 chunk 中都引用的公共模块提取成一个独立的 chunk，避免重复加载。
提取第三方库: 将第三方库提取成一个独立的 chunk，方便缓存和版本管理。
按模块分割: 将不同的模块分割成不同的 chunk，提高代码的组织性和可维护性。
按页面分割: 将不同的页面对应的代码分割成不同的 chunk，提高首屏加载速度。

Webpack Split Chunks 的优势和劣势

优势	劣势
自动化分割，无需手动管理	配置比较复杂，需要根据项目情况进行调整
可以处理复杂的依赖关系和代码复用场景	可能会生成过多的 chunk，导致请求数量增加，影响性能 (需要合理配置)
适用于大型项目	不适合非常简单的项目，可能会增加构建复杂度

一个更复杂的 Webpack Split Chunks 配置例子 (针对 React 应用):

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    clean: true,
  },
  optimization: {
    moduleIds: 'deterministic', // 保证 module id 的稳定性
    runtimeChunk: 'single', // 将 webpack 的 runtime 代码提取到一个单独的 chunk
    splitChunks: {
      chunks: 'all',
      maxInitialRequests: 20,
      maxAsyncRequests: 20,
      cacheGroups: {
        vendor: {
          test: /[\/]node_modules[\/]/,
          name(module) {
            // 获取模块名称，例如 node_modules/lodash/lodash.js -> lodash
            const packageName = module.context.match(/[\/]node_modules[\/](.*?)([\/]|$)/)[1];
            // npm package names are URL-safe, but some servers don't like @ symbols
            return `npm.${packageName.replace('@', '')}`;
          },
          priority: 10,
          reuseExistingChunk: true,
        },
        common: {
          minChunks: 2,
          priority: -10,
          reuseExistingChunk: true,
        },
        styles: {
          name: 'styles',
          test: /.css$/,
          chunks: 'all',
          enforce: true,
        },
      },
    },
  },
  // ... 其他配置
};

这个配置更加完善，考虑了以下几个方面：

moduleIds: 'deterministic'：保证 module id 的稳定性，避免每次构建都改变 module id，导致缓存失效。
runtimeChunk: 'single'：将 webpack 的 runtime 代码提取到一个单独的 chunk，避免每次构建都改变 runtime 代码，导致缓存失效。
vendor 缓存组：将 node_modules 中的模块提取成一个单独的 chunk，并根据模块名称动态生成 chunk 名称。
common 缓存组：将至少被两个 chunk 引用的模块提取成一个独立的 chunk。
styles 缓存组: 将 CSS 文件提取成一个单独的 chunk。
maxInitialRequests 和 maxAsyncRequests: 限制初始加载和按需加载时的并行请求数量，避免请求过多导致性能问题。

性能收益的量化

代码分割带来的性能收益是显而易见的，但我们如何量化这些收益呢？可以使用以下指标来衡量代码分割的效果：

首屏加载时间 (First Contentful Paint, FCP): 用户第一次看到页面内容的时间。代码分割可以显著减少 FCP，提高用户体验。
首次可交互时间 (Time to Interactive, TTI): 用户可以与页面进行交互的时间。代码分割可以减少 TTI，提高页面响应速度。
总阻塞时间 (Total Blocking Time, TBT): 页面在首次可交互之前，被阻塞的总时间。代码分割可以减少 TBT，提高页面流畅度。
JavaScript 文件大小: 代码分割可以减小 JavaScript 文件的大小，减少网络传输时间。

可以使用 Chrome DevTools 的 Lighthouse 工具来测量这些指标。

一个实际的性能对比 (假设数据):

指标	未使用代码分割	使用代码分割	性能提升
FCP (秒)	3.5	1.5	57%
TTI (秒)	5.0	2.5	50%
TBT (毫秒)	800	300	62.5%
JavaScript 文件大小 (MB)	2.0	0.8	60%

这些数据表明，代码分割可以显著提高网站的性能。

最佳实践

分析你的代码: 使用 Webpack Bundle Analyzer 等工具分析你的代码，找出可以进行代码分割的地方。
合理配置 Split Chunks: 根据你的项目情况，合理配置 Split Chunks 选项，避免生成过多的 chunk。
使用动态导入: 对于按需加载的模块，使用 dynamic import() 来延迟加载。
监控性能指标: 定期监控网站的性能指标，确保代码分割的效果。
结合 CDN 使用: 将分割后的 chunk 部署到 CDN 上，可以进一步提高加载速度。

总结

代码分割是优化 JavaScript 应用性能的重要手段。通过 dynamic import() 和 Webpack Split Chunks，我们可以将代码分割成小块，按需加载，从而减少首屏加载时间，提高用户体验。虽然配置可能有些复杂，但只要掌握了基本原理和最佳实践，就能让你的网站飞起来。

希望今天的讲解对大家有所帮助！各位加油，前端的星辰大海等着你们去征服！散会！

发表回复 取消回复

发表回复取消回复