Webpack 的 tree shaking 实现方法-JavaScript中文网-JavaScript教程资源分享门户

随着前端技术的不断发展和更新，前端工程化构建工具也在不断变化和完善，Webpack 正是其中一个重要的工具。它是一个现代化的打包工具，能够将我们的项目打包成各种格式的文件，例如压缩后的 JavaScript、CSS 和图片等等。而其中一个重要的功能就是 tree shaking（摇树优化），它可以帮助我们消除项目中未被使用的代码，减小打包后的体积，提高性能。

Tree shaking 是什么？

Tree shaking 是一个优化项目的技术，它的目的是移除掉项目中未被使用的代码，减小项目打包后的体积，从而提高项目性能。tree shaking 只对 ES6 模块化方式引入的代码有效，因为 ES6 的模块化可以静态分析和确定模块的依赖关系。tree shaking 依赖于静态代码分析，即分析代码在编译期间依赖关系，从而移除未被使用的调用。

如何实现 Tree shaking？

Webpack 4 及以上的版本已经原生支持了 ES6 的模块化方式进行 tree shaking，并且也提供了一些针对 tree shaking 的配置，简单来说实现 tree shaking 需要如下三个步骤：

配置 Webpack 告诉其使用 ES6 模块化方式；
在代码中使用 ES6 的 import 或 require 语法；
启用 UglifyJSPlugin 或 TerserPlugin 进行代码压缩。

接下来我们通过一个示例代码对 tree shaking 的实现方式进行简单介绍。

我们有一个 JavaScript 文件 main.js ，其中定义了一个求和函数和一个打印函数，但可能在将来的业务场景中，只需要使用求和函数，打印函数不需要使用，为了减少打包文件的体积，我们就可以使用 tree shaking 技术来移除掉未被使用的打印函数。

// main.js
import { sum } from './math';
import { print } from './print';

console.log(sum(1, 2));  // 打印 3
print('hello, webpack!');

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

// print.js
export function print(str) {
  console.log(str);
}

webpack 配置如下：

// www.javascriptcn.com code example
const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  entry: './src/main.js',
  mode: 'production',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    minimizer: [new UglifyJsPlugin()]
  }
};

我们在使用 Webpack 进行打包的时候，启用了 UglifyJsPlugin 这个插件，它可以帮我们进行代码压缩和 tree shaking。

打包后的文件内容如下：

!function(e){var r={};function t(n){if(r[n])return r[n].exports;var o=r[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,t),o.l=!0,o.exports}t.m=e,t.c=r,t.d=function(e,r,n){t.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:n})},t.r=function(e){'undefined'!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:'Module'}),Object.defineProperty(e,'__esModule',{value:!0})},t.t=function(e,r){if(1&r&&(e=t(e)),8&r)return e;if(4&r&&'object'==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(t.r(n),Object.defineProperty(n,'default',{enumerable:!0,value:e}),2&r&&'string'!=typeof e)for(var o in e)t.d(n,o,function(r){return e[r]}.bind(null,o));return n},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,'a',r),r},t.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},t.p='',t(t.s=0)}([function(e,r,t){"use strict";t.r(r);var n=t(1);console.log(n.sum(1,2))}]);

可以看到，打包后的文件已经将未被使用的 print 函数全部删除，达到了 tree shaking 的效果。

结语

在现代 Web 开发中，前端工程化构建工具已经成为固定的一环，而 Webpack 正是其中的佼佼者。Tree shaking 技术是我们进行优化和性能提升的一个有效工具，能够帮助我们移除未被使用的代码，减小项目的体积，提高项目性能。实现 tree shaking 只需要进行简单的 Webpack 配置和使用 ES6 的模块化方式即可，在日常的工作和开发中，我们应该积极尝试使用和掌握。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67bead390c976d473a2cc095

Webpack 的 tree shaking 实现方法

Tree shaking 是什么？

如何实现 Tree shaking？

结语

接着读