WebPack Tree Shaking 教程

发布时间：2023-05-06 13:37:55 所属栏目：教程来源：

在我们的项目中添加一个新的通用模块文件 src/math.js，此文件导出两个函数：

project

webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- bundle.js
|- index.html
|- /src
|- index.js+ |- math.js|- /node_modules
src/math.js

export function square(x) {
return x * x;}export function cube(x) {
return x * x * x;}
接着，更新入口脚本，使用其中一个新方法，并且为了简单，将 lodash 删除：

src/index.js

- import _ from 'lodash';+ import { cube } from './math.js';

function component() {- var element = document.createElement('div');+ var element = document.createElement('pre');- // lodash 是由当前 script 脚本 import 导入进来的- element.innerHTML = _.join(['Hello', 'webpack'], ' ');+ element.innerHTML = [+ 'Hello webpack!',+ '5 cubed is equal to ' + cube(5)+ ].join('\n\n');

return element;
}

document.body.appendChild(component());
注意，我们并未从 src/math.js 模块中 import 导入 square 方法。这个功能是所谓的“未引用代码(dead code)”，也就是说，应该删除掉未被引用的 export。现在让我们运行我们的npm 脚本 npm run build，并检查输出的 bundle：

dist/bundle.js (around lines 90 - 100)

/* 1 *//***/ (function(module, __webpack_exports__, __webpack_require__) {"use strict";/* unused harmony export square *//* harmony export (immutable) */ __webpack_exports__["a"] = cube;function square(x) {
return x * x;}function cube(x) {
return x * x * x;}
注意，上面的 unused harmony export square 注释。如果你看下面的代码，你会注意到 square 没有被导入，但是，它仍然被包含在 bundle 中。我们将在下一节中解决这个问题。

将文件标记为无副作用(side-effect-free)
在一个纯粹的 ESM 模块世界中，识别出哪些文件有副作用很简单。然而，我们的项目无法达到这种纯度，所以，此时有必要向 webpack 的 compiler 提供提示哪些代码是“纯粹部分”。

这种方式是通过 package.json 的 "sideEffects" 属性来实现的。

{
"name": "your-project",
"sideEffects": false}
如同上面提到的，如果所有代码都不包含副作用，我们就可以简单地将该属性标记为 false，来告知 webpack，它可以安全地删除未用到的 export 导出。

「副作用」的定义是，在导入时会执行特殊行为的代码，而不是仅仅暴露一个 export 或多个 export。举例说明，例如 polyfill，它影响全局作用域，并且通常不提供 export。

如果你的代码确实有一些副作用，那么可以改为提供一个数组：

{
"name": "your-project",
"sideEffects": [
"./src/some-side-effectful-file.js"
]}
数组方式支持相关文件的相对路径、绝对路径和 glob 模式。它在内部使用 micromatch。

注意，任何导入的文件都会受到 tree shaking 的影响。这意味着，如果在项目中使用类似 css-loader 并导入 CSS 文件，则需要将其添加到 side effect 列表中，以免在生产模式中无意中将它删除：

{
"name": "your-project",
"sideEffects": [
"./src/some-side-effectful-file.js",
"*.css"
]}
最后，还可以在 module.rules 配置选项中设置 "sideEffects"。

压缩输出
通过如上方式，我们已经可以通过 import 和 export 语法，找出那些需要删除的“未使用代码(dead code)”，然而，我们不只是要找出，还需要在 bundle 中删除它们。为此，我们将使用 -p(production) 这个 webpack 编译标记，来启用 uglifyjs 压缩插件。

注意，--optimize-minimize 标记也会在 webpack 内部调用 UglifyJsPlugin。

从 webpack 4 开始，也可以通过 "mode" 配置选项轻松切换到压缩输出，只需设置为 "production"。

webpack.config.js

const path = require('path');

module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')- }+ },+ mode: "production"};
注意，也可以在命令行接口中使用 --optimize-minimize 标记，来使用 UglifyJSPlugin。

准备就绪后，然后运行另一个命令 npm run build，看看输出结果有没有发生改变。

你发现 dist/bundle.js 中的差异了吗？显然，现在整个 bundle 都已经被精简过，但是如果仔细观察，则不会看到 square 函数被引入，但会看到 cube 函数的修改版本（function r(e){return e*e*e}n.a=r）。现在，随着 tree shaking 和代码压缩，我们的 bundle 减小几个字节！虽然，在这个特定示例中，可能看起来没有减少很多，但是，在具有复杂的依赖树的大型应用程序上运行时，tree shaking 或许会对 bundle 产生显著的体积优化。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!