七步玩转淘宝性能优化，Webpack 与 SplitChunk 等的妙用

2023-11-17 11:34:11

各位淘宝的朋友们，大家好！
很高兴今天能在这里与大家分享我在淘宝优化一个大型项目的一些干货。

本项目是淘系用户增长团队的一个大中台系统，采用单页应用架构，涵盖了诸多业务功能。我们使用了大量的懒加载页面组件来提高性能，首屏时间约为 1 秒，体验良好。然而，由于项目庞大，文件数量众多，导致构建和发布时间过长，并且内存占用较大。我的任务就是尽可能地优化与此相关的问题。

首先，我们不难发现问题并不在于用户体验，而在于开发...

1. 优化构建流程

首先，我们对构建流程进行了优化。我们使用 webpack 作为构建工具，并应用了 SplitChunk 插件来实现代码拆分。SplitChunk 插件可以将公共代码提取到单独的 chunk 中，从而减少了重复的代码量，提高了构建速度。

2. 应用 SplitChunk

接下来，我们重点介绍一下 SplitChunk 插件的使用。SplitChunk 插件有两种主要模式：

自动模式：在自动模式下，webpack 会自动将公共代码提取到单独的 chunk 中。
手动模式：在手动模式下，我们需要显式地指定哪些代码应该提取到单独的 chunk 中。

3. 剖析 webpack 和代码拆分

为了更好地理解 webpack 和代码拆分，我们还需要对它们进行剖析。

webpack 是一个模块打包工具，它可以将我们的代码打包成一个或多个文件。webpack 的工作原理大致如下：

首先，webpack 会将我们的代码解析成 AST（抽象语法树）。
然后，webpack 会将 AST 转换为一个依赖图。
最后，webpack 会根据依赖图将我们的代码打包成一个或多个文件。

代码拆分是一种优化技术，它可以将我们的代码拆分成多个小的块，从而减少每个块的大小。代码拆分有两种主要方法：

按需加载：按需加载是指只有当需要的时候才加载代码。
预加载：预加载是指提前加载代码，以便在需要的时候可以立即使用。

4. 全面优化前端性能

除了以上提到的优化外，我们还对前端性能进行了全面的优化。我们使用了以下技术：

懒加载：懒加载是指只有当需要的时候才加载代码。
代码压缩：代码压缩是指将代码中的空白字符、注释和不必要的代码删除，从而减小代码的大小。
缓存：缓存是指将经常使用的数据存储在内存中，以便在下次使用时可以快速访问。
CDN：CDN（内容分发网络）是指将我们的代码和资源分布到多个服务器上，以便用户可以从离他们最近的服务器上获取代码和资源。

5. 实例代码

为了方便大家理解，我提供了一些实例代码。这些代码展示了如何使用 webpack 和 SplitChunk 插件来优化代码。

const webpack = require('webpack');
const SplitChunkPlugin = require('webpack/lib/optimize/SplitChunkPlugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].js',
  },
  plugins: [
    new SplitChunkPlugin({
      chunks: 'all',
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
    }),
  ],
};