tree shaking对打包体积优化及作用

什么是Tree Shaking

Tree Shaking 是指在打包过程中，检测出未被引用的代码，并在最终打包结果中将这些未引用的代码（也被称为“未引用代码(dead code)”）移除。Tree Shaking 目的是为了精简打包后的代码和减小文件体积，提升网页加载速度。

在理解 Tree Shaking 之前需要了解几个概念：
- 模块 (Module)：为了使 JavaScript 更加规范化，ES6 引入了模块化的概念。
- 导入 (Import)：在一个模块中加载另一个模块中的代码。
- 导出 (Export)：将一个模块中的代码暴露给其他模块使用。

实现 Tree Shaking

为了让项目能启用 Tree Shaking，需要满足以下要求。

使用ES6模块化

Tree Shaking 只能对 ES6 模块化的代码起作用，因此在项目中应该使用 ES6 模块化。

// ES6 module
import { method } from './module.js'

// CommonJS module
const { method } = require('./module.js')

如果项目中使用的是 CommonJS 或者 AMD 模块化，需要在 webpack.config.js 中打开 webpack 的相关配置以兼容 Tree Shaking，详见官方文档。

production模式打包

Tree Shaking 只会在 production 模式下起作用，开发模式下不会对应用进行代码清理。因此，需要先开启 mode = 'production'。

配置Webpack

在 webpack 的配置文件中通过 optimization 开启 Tree Shaking：

module.exports = {
  optimization: {
    usedExports: true
  }
}

在使用 Webpack4.x 及以上版本时，不需要手动添加 usedExports: true 属性，Webpack已默认开启这个属性。

示例一

在源文件中引入 add 方法并应用到代码中，最终在打包的代码中，需要排除未使用的方法。

sum.js 文件：

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

index.js 文件：

import { add } from './sum';

console.log(add(1, 2));
console.log('test');

打包后的文件为：

console.log(add(1, 2));
console.log('test');

从打包后的代码可以看到，subtract 方法由于没有被使用，已经被去掉了。

示例二

有时候，JavaScript框架或者工具库自己的函数库和引入的其他库中，可能有相同的名字。而且还可能同样的函数名，会存在多个不同的实现。在这种情况下，需要确保 Tree Shaking 可以识别需要的库，而不会将多余的代码打包进应用中。

lodash.js 模板库：

export function camelCase(str) {
  return str.replace(/[-_]+(.)?/g, (_, c) => (c ? c.toUpperCase() : ''));
}
export function kebabCase(str) {
  return camelCase(str).replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
}

App.js 文件：

import { kebabCase } from 'lodash';

console.log(kebabCase('Some-Component'));
console.log('test');

打包后的文件为：

console.log("some-component");
console.log("test");

从打包后的代码可以看到，只有应用使用的 kebabCase 方法被打包进去。camelCase 方法由于没有被使用，已经被去掉了。

总结

Tree Shaking 可以在打包过程中自动删除掉应用中未被使用的代码，大大减少应用体积，加快应用加载速度。需要开启 ES6 模块化，webpack 需要配置，同时也需要开启 production 模式才能生效。