Webpack之Tree shaking

最新推荐文章于 2025-01-25 11:42:16 发布

Meskjei

最新推荐文章于 2025-01-25 11:42:16 发布

阅读量231

点赞数

分类专栏：前端 Webpack 文章标签： Webpack Tree Shaking

本文链接：https://blog.youkuaiyun.com/hjc256/article/details/100111363

版权

前端同时被 2 个专栏收录

70 篇文章

订阅专栏

Webpack

18 篇文章

订阅专栏

本文介绍了Webpack中的Tree Shaking技术，旨在优化打包文件体积。通过一个实例展示了即使只使用了math.js的一个方法，打包后文件仍包含全部内容的问题。在开发模式下，需额外配置才能实现Tree Shaking，但生产模式下仍会保留所有代码以方便调试。Tree Shaking仅支持ES module，对于未导出内容的库和CSS文件，需通过设置'-sideEffects'字段来指导打包过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引入

了解Tree Shaking之前先来看一个例子：

math.js：

export const add = (a, b) => {
    console.log(a+b);
}

export const minus = (a, b) => {
    console.log(a-b);
}

index.js：

import { add } from './math';

add(1, 2);

若在development模式下打包文件，可以发现虽然我们只从math.js引入了add这个方法，但是打包出的文件中依旧是两个方法都有。

这就引发了我们的思考，由于一个模块中可能会导出许多的方法、属性。如果我们只打包我们所需要的那部分代码不就可以大幅精简打包文件了吗？

是的，这个过程就是Tree Shaking，直译过来就是摇树，就是将多余的枝干摇落。

使用

首先如果是在production的模式下进行打包，那么默认就会进行Tree Shaking，若是在development模式下，则需要在配置文件中进行如下配置：

{
    ...,
    optimization: {
        usedExports: true
    }
}

不过呢在development模式下即便是进行了如上配置，打包出的文件也依然会包含模块的所有代码。仅仅是在注释中做出了标注
在这里插入图片描述
这时因为若在开发环境中去掉某些代码，在出现错误时就无法正确体现代码的行数。

注：Tree Shaking仅支持ES module（即通过import引入的module）

问题

Tree Shaking是通过查看我们用import引入的模块有没有导出方法或属性以及我们使用了哪些导出的内容来判断是否进行Tree Shaking。

那这样就会有一个问题，那便是例如@babel/polyfill这样的库，它并没有导出任何的内容，它是将方法挂载到了window对象上。

同样的，还有CSS文件，它也没有导出任何的内容。

那么Tree Shaking默认的情况下，这些文件通通不会被打包。

那么该怎么办呢？

这时我们需要在package.json中设置“sideEffects”字段，字段的值是布尔值或者一个数组，数组元素即为不需要Tree Shaking的模块名或文件路径。若设置为false，则代表所有文件都会经过Tree Shaking过程。