现在打包工具，如何才能够正确实现 tree-shaking？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 990 天前的主题，其中的信息可能已经有所发展或是发生改变。

我记得，要想在 import {a , b } from "usedPakcage"; 的时候，只打包 a, b 的代码，而不会打包所有的 usedPackage ，有哪些条件？

usedPackage 输出的时候，不能 export * from "..."；？而且在引用的时候，也不能 import * as A from "usedPackage"; 么？
还是说，只要两个包都是 ESModule ，webpack 等打包工具，已经“聪明”到，直接就能够 tree-shaking 了？不论包的 export 以及 import 怎么写？

谢谢！

import

打包

export

from

3 条回复 • 2022-03-16 22:10:51 +08:00

mxT52CRuqR6o5

2022-03-16 10:54:28 +08:00 via Android

看 webpack 文档里的说明

hronro

2022-03-16 11:04:31 +08:00

如果我没记错的话，Webpack 本身是不能做 tree-shaking 的，它只会对一个 module 的每个 export 做一个使用情况的标记，最后依赖 uglify 这样的插件来做 tree-shaking ，所以 Webpack 的 tree-shaking 效果一直不理想。如果想要更好的 tree-shaking ，可以考虑用 Rollup 这样的工具。

SoloCompany

2022-03-16 22:10:51 +08:00

moduleA: function() {
definedProperty(module_a_export, 'a', methodA);

function methodA() {
}

function methodB() {
}
}

moduleB: function() {
module_a_a = imported_moduleA.a;
}

webpack 大概做的是这样的事情, 通过依赖分析, 标记每个 export object 是否有被引用, 只有被引用的 object 会生成 defineProperty 的文件头

实际上 webpack 不会删除任何内容, 即使 ModuleConcatenationPlugin 把所有模块都连接成一个模块

最终是通过 minimizer (terser 或以前叫的 uglify) remove dead code 实现