从0开始学习JavaScript--JavaScript 代码分割

JavaScript 代码分割是一种优化策略，旨在改善网页加载性能和用户体验。通过将代码拆分成较小的块，只在需要时加载，可以降低初始加载时间，减小页面体积，并提高应用的整体性能。本文将深入探讨 JavaScript 代码分割的各个方面，并通过丰富的示例代码演示其实际应用。

代码分割的定义

代码分割（Code Splitting）是一种将应用的代码拆分成多个小块的技术，以便在运行时动态加载。这有助于减小初始加载时间，提高页面的响应速度。

为什么需要代码分割？

1 加速初始加载时间

当应用的代码较大时，用户首次访问页面可能需要下载大量的 JavaScript 代码，导致加载时间较长。通过代码分割，可以将页面的核心代码和功能进行划分，仅在用户需要时加载，加速初始加载。

2 减小页面体积

将代码拆分成多个小块，使得用户在浏览网页时只需加载当前页面所需的代码，而不是一次性下载整个应用的代码。这有助于减小页面体积，提高用户体验。

3 优化缓存利用率

浏览器在加载资源时会使用缓存机制，但如果整个应用的代码被打包成一个大文件，即使其中的一小部分发生变化，整个文件都需要重新下载。代码分割可以根据模块的变化情况，只加载发生变化的部分，更好地利用缓存。

代码分割的方式

1 手动代码分割

基本示例

// main.js
import { add } from './math';

console.log(add(5, 3));

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

上述代码通过手动拆分 math.js 模块，只导入了 add 函数，从而避免了不必要的代码加载。

使用 import() 实现动态导入

// main.js
document.getElementById('btn').addEventListener('click', () => {
  import('./math').then((math) => {
    console.log(math.add(5, 3));
  });
});

通过使用 import() 函数，可以在运行时动态加载模块，从而实现更灵活的代码分割。

2 Webpack 的代码分割

静态导入

通过 Webpack 的静态导入语法，可以在代码中明确指定哪些模块需要进行代码分割。

// webpack.config.js
module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

动态导入

Webpack 还支持动态导入，通过配置 optimization.splitChunks 实现对动态导入模块的代码分割。

// main.js
document.getElementById('btn').addEventListener('click', async () => {
  const math = await import(/* webpackChunkName: "math" */ './math');
  console.log(math.add(5, 3));
});

Webpack的代码分割进阶

在前文中我们提到了Webpack的基本代码分割配置，现在深入了解一些进阶的配置和使用情境。

1 按需加载与预取

Webpack提供了一些高级特性，如按需加载（On-Demand Loading）和预取（Pre-fetching），以更加精细地控制代码的加载。

按需加载

按需加载可以在用户需要时，动态地加载相应的模块。这对于提升初始加载速度尤为有用。

// main.js
document.getElementById('btn').addEventListener('click', async () => {
  const math = await import(/* webpackChunkName: "math" */ './math');
  console.log(math.add(5, 3));
});

上述代码使用Webpack的import()函数，当按钮被点击时，会动态加载math模块。

预取

预取允许浏览器在空闲时间提前加载某些资源，以提高后续导航的加载速度。

// main.js
const button = document.getElementById('btn');

button.addEventListener('click', async () => {
  // 按需加载math模块
  const math = await import(/* webpackChunkName: "math" */ './math');
  console.log(math.add(5, 3));
});

// 在空闲时间预取math模块
button.addEventListener('mouseover', () => {
  import(/* webpackPrefetch: true */ './math');
});

上述代码在按钮被悬停时预取了math模块，以便在用户点击按钮时更快地加载。

2 共享模块

在大型应用中，可能存在多个模块依赖同一个公共模块。Webpack提供了splitChunks配置，可以将这些公共模块提取出来，以避免重复加载。

// webpack.config.js
module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

上述配置将会把所有共享的模块提取到一个单独的文件中，以提高缓存的利用率。

动态导入与服务端渲染

在使用动态导入时，需要注意其在服务端渲染（Server-Side Rendering）中的使用。

// main.js
import('./math').then((math) => {
  console.log(math.add(5, 3));
});

如果应用进行了服务端渲染，需要确保动态导入的模块在服务端和客户端都能正确加载。Webpack提供了ssrMode选项，可以在服务端渲染时动态导入。

// webpack.config.js
module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'all',
      // 在服务端渲染时启用动态导入
      runtimeChunk: { name: 'ssr' },
    },
  },
};

性能考虑与工具支持

1 性能考虑

虽然代码分割可以显著提高性能，但过度的分割也可能导致性能问题。因此，在进行代码分割时需要谨慎权衡。合理的代码分割策略需要考虑模块的大小、加载时机和缓存利用率。

2 Webpack Bundle Analyzer

为了更好地可视化应用的代码分割情况，可以使用Webpack Bundle Analyzer工具。该工具会生成一份直观的报告，展示模块的大小、依赖关系等信息，帮助开发者进行优化决策。

使用场景和注意事项

1 使用场景

• 按需加载页面模块： 针对复杂页面，将页面划分成多个模块，只加载当前页面所需的模块，提高用户体验。
• 减小第三方库体积： 将第三方库进行代码分割，只加载应用中真正需要的部分，减小页面体积。
• 优化路由页面加载： 对于单页应用，可以根据路由进行代码分割，实现按需加载路由页面。

2 注意事项

• 过度代码分割： 过度细分模块可能会导致过多的网络请求，反而影响性能。需在合适的场景和模块进行代码分割。
• 缓存与加载顺序： 需注意代码分割可能导致的模块加载顺序问题，以及对缓存的影响。
• Webpack 配置： 在使用 Webpack 进行代码分割时，需要仔细配置 splitChunks 以及 optimization.splitChunks。

总结

JavaScript 代码分割是一项关键的性能优化策略，通过将应用代码拆分成小块，在需要时动态加载，可以加速初始加载时间，减小页面体积，并提高应用整体性能。通过手动代码分割和使用工具（如 Webpack）提供的功能，开发者可以根据应用需求实现灵活而高效的代码分割策略。在实际应用中，需要根据具体场景和需求，权衡代码分割的得失，确保优化效果最大化。