Webpack 如何进行代码分割 (Code Splitting) 和 Tree Shaking (摇树优化)？ - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众，晚上好！我是你们的老朋友，代码界的段子手，今天咱们来聊聊Webpack的两个绝技：代码分割（Code Splitting）和摇树优化（Tree Shaking）。这两兄弟能让你的代码瘦身成功，跑得更快，体验更佳。准备好，咱们开始今天的“Webpack健身房”之旅！

第一站：代码分割（Code Splitting）—— 模块化减肥大法

想象一下，你的网站就像一个巨大的行李箱，里面塞满了各种各样的东西，从HTML、CSS到JavaScript，什么都有。如果用户第一次访问你的网站，就要把整个行李箱都下载下来，是不是太慢了？代码分割就像是给你的行李箱分门别类，把不同的东西放到不同的包里，用户需要什么就下载什么，这样速度就快多了。

1. 为什么需要代码分割？

减少初始加载时间： 用户只需要下载当前页面需要的代码，而不是整个应用程序的代码。
提高性能： 浏览器可以并行下载多个文件，加快加载速度。
更好的缓存利用： 当代码发生变化时，只需要重新下载改变的部分，而不是整个应用程序。

2. Webpack代码分割的几种方式

Webpack提供了几种方式来实现代码分割，咱们一个一个来了解：

入口点（Entry Points）： 这是最简单的一种方式，Webpack会为每个入口点创建一个单独的bundle。
```
// webpack.config.js
module.exports = {
  entry: {
    main: './src/index.js',
    about: './src/about.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};
```
在这个例子中，Webpack会生成 main.bundle.js 和 about.bundle.js 两个文件。适合应用有多个入口页面的情况。

动态导入（Dynamic Imports）： 使用 import() 语法，可以在运行时按需加载模块。

// src/index.js
async function getComponent() {
  const element = document.createElement('div');
  const { default: _ } = await import(/* webpackChunkName: "lodash" */ 'lodash');
  element.innerHTML = _.join(['Hello', 'Webpack'], ' ');
  return element;
}

getComponent().then(component => {
  document.body.appendChild(component);
});

在这个例子中，lodash 模块会在运行时按需加载，Webpack会生成一个单独的chunk文件（lodash.bundle.js）。 /* webpackChunkName: "lodash" */ 是一个魔法注释，告诉Webpack这个chunk的名字。

SplitChunksPlugin： 这是最灵活也是最常用的方式，它可以根据你的配置自动分割代码。
```
// webpack.config.js
module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'all', // 'all', 'async', 'initial'
      cacheGroups: {
        vendors: {
          test: /[\/]node_modules[\/]/,
          name: 'vendors',
          chunks: 'all'
        },
        common: {
          name: 'common',
          minChunks: 2,
          chunks: 'all',
          reuseExistingChunk: true
        }
      }
    }
  }
};
```
SplitChunksPlugin 的配置项比较多，咱们来详细解释一下：
- chunks： 指定要分割的代码类型。
  - all：分割所有类型的chunk（同步和异步）。
  - async：只分割异步chunk（通过动态导入加载的模块）。
  - initial：只分割初始chunk（入口点）。
- cacheGroups： 定义不同的缓存组，每个缓存组可以有自己的配置。
  - vendors： 用于提取第三方库。
    - test：指定要匹配的模块，这里匹配的是 node_modules 目录下的所有模块。
    - name：指定生成的chunk的名字。
    - chunks：指定要分割的代码类型，这里设置为 all。
  - common： 用于提取公共模块。
    - name：指定生成的chunk的名字。
    - minChunks：指定模块被引用多少次才会被提取出来，这里设置为 2，表示一个模块至少被两个chunk引用才会提取出来。
    - chunks：指定要分割的代码类型，这里设置为 all。
    - reuseExistingChunk：如果一个模块已经被提取到某个chunk中，是否重用这个chunk。

3. 代码分割的实战演练

咱们来写一个简单的例子，演示一下如何使用 SplitChunksPlugin 来进行代码分割。

// src/index.js
import _ from 'lodash';
import './style.css';

function component() {
  const element = document.createElement('div');

  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  element.classList.add('hello');

  return element;
}

document.body.appendChild(component());

// src/about.js
import _ from 'lodash';

function about() {
  const element = document.createElement('div');

  element.innerHTML = _.join(['About', 'page'], ' ');

  return element;
}

document.body.appendChild(about());

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

module.exports = {
  entry: {
    index: './src/index.js',
    about: './src/about.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendors: {
          test: /[\/]node_modules[\/]/,
          name: 'vendors',
          chunks: 'all'
        },
        common: {
          name: 'common',
          minChunks: 2,
          chunks: 'all',
          reuseExistingChunk: true
        }
      }
    }
  }
};

在这个例子中，index.js 和 about.js 都引用了 lodash 模块。通过 SplitChunksPlugin 的配置，Webpack会将 lodash 模块提取到一个单独的 vendors.bundle.js 文件中，这样 index.bundle.js 和 about.bundle.js 就可以共享这个 vendors.bundle.js 文件，减少了代码的重复。

第二站：摇树优化（Tree Shaking）—— 代码瘦身大法

代码分割解决了代码加载的问题，摇树优化则解决了代码冗余的问题。想象一下，你的代码就像一棵树，上面有很多树枝（代码），但是有些树枝是枯萎的，没有用的。摇树优化就像是把这些枯萎的树枝摇下来，让你的代码树更加健康。

1. 什么是摇树优化？

摇树优化是一种移除 JavaScript 上下文中未引用代码（dead-code）的技术。它依赖于 ES6 模块的静态分析能力，Webpack可以静态分析你的代码，找出哪些模块被引用了，哪些模块没有被引用，然后把没有被引用的模块从最终的bundle中移除。

2. 摇树优化的前提条件

使用 ES6 模块： 摇树优化依赖于 ES6 模块的静态分析能力，所以你必须使用 import 和 export 语法。
使用 production 模式： Webpack的 production 模式会自动开启摇树优化。

3. 摇树优化的原理

Webpack在构建过程中，会进行以下步骤：

标记（Mark）： 标记所有导出的变量。
追踪（Trace）： 追踪哪些变量被使用了。
清除（Sweep）： 清除没有被使用的变量。

4. 摇树优化的实战演练

咱们来写一个简单的例子，演示一下摇树优化是如何工作的。

// src/math.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// src/index.js
import { add } from './math.js';

function component() {
  const element = document.createElement('div');

  element.innerHTML = '1 + 2 = ' + add(1, 2);

  return element;
}

document.body.appendChild(component());

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

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  mode: 'production' // 开启 production 模式
};

在这个例子中，math.js 模块导出了 add 和 subtract 两个函数，但是在 index.js 中只使用了 add 函数。当Webpack在 production 模式下构建时，会移除 subtract 函数，减小bundle的大小。

5. 摇树优化的注意事项

副作用（Side Effects）： 有些模块可能会有副作用，例如修改全局变量或者执行一些操作。Webpack无法判断这些模块是否被使用，所以默认情况下不会移除它们。如果你确定某个模块没有副作用，可以在 package.json 文件中设置 sideEffects: false 来告诉Webpack。
```
// package.json
{
  "name": "my-project",
  "version": "1.0.0",
  "sideEffects": false
}
```
CommonJS 模块： 摇树优化对 CommonJS 模块的支持有限，因为 CommonJS 模块是动态加载的，Webpack无法静态分析它们。尽量使用 ES6 模块。

第三站：代码分割和摇树优化的结合使用

代码分割和摇树优化可以结合使用，达到更好的效果。你可以先使用代码分割将你的代码分割成多个chunk，然后使用摇树优化移除每个chunk中未使用的代码。

1. 结合使用的最佳实践

使用动态导入： 使用动态导入可以按需加载模块，减少初始加载时间，并且可以更好地利用摇树优化。
合理配置 SplitChunksPlugin： 合理配置 SplitChunksPlugin 可以将公共模块提取到单独的chunk中，减少代码的重复，并且可以更好地利用摇树优化。
开启 production 模式： 确保你的Webpack配置中开启了 production 模式，这样才能开启摇树优化。
避免副作用： 尽量避免在模块中产生副作用，或者显式地声明模块没有副作用。

2. 一个更复杂的例子

// src/utils.js
export function formatNumber(num) {
  return num.toLocaleString();
}

export function formatDate(date) {
  return date.toLocaleDateString();
}

// src/components/button.js
import { formatNumber } from '../utils.js';

export function createButton(text, onClick) {
  const button = document.createElement('button');
  button.textContent = text;
  button.addEventListener('click', onClick);
  return button;
}

// src/index.js
import { createButton } from './components/button.js';

const button = createButton('Click me', () => {
  alert('Button clicked!');
});

document.body.appendChild(button);

// src/about.js
import { formatDate } from './utils.js';

const date = new Date();
const dateString = formatDate(date);

const element = document.createElement('div');
element.textContent = 'Today is ' + dateString;

document.body.appendChild(element);

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

module.exports = {
  entry: {
    index: './src/index.js',
    about: './src/about.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  mode: 'production',
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};

在这个例子中，index.js 使用了 createButton 函数，about.js 使用了 formatDate 函数，utils.js 模块导出了 formatNumber 和 formatDate 两个函数，components/button.js 模块导出了 createButton 函数。

Webpack会进行以下操作：

代码分割： Webpack会将 index.js 和 about.js 分割成两个单独的chunk。
摇树优化：
- 在 index.bundle.js 中，Webpack会移除 formatDate 函数。
- 在 about.bundle.js 中，Webpack会移除 createButton 和 formatNumber 函数。
公共模块提取： 如果 utils.js 或者 components/button.js 中的代码足够大，并且被其他 chunk 共享，Webpack可能会将它们提取到一个单独的 chunk 中。

总结

代码分割和摇树优化是Webpack的两大利器，它们可以帮助你优化你的代码，减少bundle的大小，提高性能。掌握它们，你的网站就能跑得更快，用户体验也能更好。

一些建议

分析你的bundle： 使用 Webpack Bundle Analyzer 可以帮助你分析你的bundle，找出哪些模块占用了大量的空间，哪些模块可以被优化。
持续优化： 代码分割和摇树优化是一个持续的过程，你需要不断地分析你的代码，找出新的优化点。
关注 Webpack 的更新： Webpack 会不断地更新，新的版本可能会带来新的优化功能，关注 Webpack 的更新可以帮助你更好地利用 Webpack。

好了，今天的“Webpack健身房”之旅就到这里了。希望大家都能练出健康的代码，打造高性能的网站！如果大家有什么问题，欢迎随时提问。下次再见！

发表回复 取消回复

发表回复取消回复