博客站

Code Splitting（代码分割） 是一种将代码拆分为多个 bundle 或 chunk 的技术，使得应用可以按需加载这些代码块，而不是一次性加载所有代码。这种方式可以显著减少初始加载时间，提升应用性能。

1. Code Splitting 的作用

• 减少初始加载时间：只加载当前页面或功能所需的代码，减少初始加载的文件体积。
• 优化用户体验：按需加载代码，提升应用的响应速度。
• 提高缓存利用率：将不常变动的代码（如第三方库）分离到独立的 chunk 中，利用浏览器缓存。

2. Code Splitting 的实现方式

Webpack 提供了多种方式来实现 Code Splitting，以下是常见的几种方法：

方法 1：入口起点（Entry Points）

通过配置多个入口文件，手动分离代码。

示例配置

module.exports = {
  entry: {
    app: './src/app.js',
    vendor: './src/vendor.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

缺点

• 如果多个入口文件共享相同的模块，这些模块会被重复打包到每个 bundle 中。
• 需要手动管理依赖关系。

方法 2：防止重复（SplitChunksPlugin）

使用 SplitChunksPlugin 自动分离公共模块和第三方库。

示例配置

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};

配置选项

• chunks：指定哪些 chunk 需要优化，可选值：
  • async：只优化异步加载的 chunk（默认）。
  • initial：只优化同步加载的 chunk。
  • all：优化所有 chunk。
• minSize：指定 chunk 的最小大小（默认 30KB）。
• maxSize：指定 chunk 的最大大小。
• minChunks：指定模块被引用次数超过该值时才分离。

方法 3：动态导入（Dynamic Imports）

使用 import() 语法动态加载模块，Webpack 会自动将动态导入的模块分离到独立的 chunk 中。

示例代码

// 动态加载模块
button.addEventListener('click', () => {
  import('./module').then(module => {
    module.doSomething();
  });
});

优点

• 按需加载代码，减少初始加载时间。
• 自动分离 chunk，无需手动配置。

方法 4：预获取/预加载（Prefetching/Preloading）

通过 import() 的魔法注释，实现预获取或预加载模块。

示例代码

// 预获取模块
button.addEventListener('click', () => {
  import(/* webpackPrefetch: true */ './module').then(module => {
    module.doSomething();
  });
});

// 预加载模块
button.addEventListener('click', () => {
  import(/* webpackPreload: true */ './module').then(module => {
    module.doSomething();
  });
});

区别

• webpackPrefetch：在浏览器空闲时加载模块，适用于未来可能需要的模块。
• webpackPreload：与主 chunk 并行加载模块，适用于当前页面需要的模块。

方法 5：使用 React.lazy 和 Suspense（React 专属）

React 提供了 React.lazy 和 Suspense 来实现组件的懒加载。

示例代码

import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

优点

• 简化 React 组件的懒加载。
• 结合 Suspense 提供加载中的 fallback UI。

3. Code Splitting 的最佳实践

1. 分离第三方库：

   • 使用 SplitChunksPlugin 将第三方库（如 react、lodash）分离到独立的 chunk 中。

2. 按路由分割：

   • 在单页应用（SPA）中，按路由动态加载组件，减少初始加载时间。

3. 预获取关键资源：

   • 使用 webpackPrefetch 预获取未来可能需要的资源，提升用户体验。

4. 避免过度分割：

   • 过多的 chunk 会增加 HTTP 请求的数量，影响性能。根据实际需求合理分割代码。

4. 完整示例

以下是一个结合动态导入和 SplitChunksPlugin 的完整配置：

Webpack 配置

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  },
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  }
};

动态导入示例

// src/index.js
document.getElementById('button').addEventListener('click', () => {
  import('./module').then(module => {
    module.doSomething();
  });
});

总结

Code Splitting 是一种通过将代码拆分为多个 chunk 来优化应用性能的技术。常见的实现方式包括：

1. 入口起点：手动分离代码。
2. 防止重复：使用 SplitChunksPlugin 自动分离公共模块。
3. 动态导入：使用 import() 按需加载模块。
4. 预获取/预加载：通过魔法注释优化资源加载。
5. React.lazy 和 Suspense：简化 React 组件的懒加载。

通过合理使用 Code Splitting，可以显著减少初始加载时间，提升用户体验。