我记得,要想在 import {a , b } from "usedPakcage"; 的时候,只打包 a, b 的代码,而不会打包所有的 usedPackage ,有哪些条件?
usedPackage 输出的时候,不能 export * from "...";?而且在引用的时候,也不能 import * as A from "usedPackage"; 么?
还是说,只要两个包都是 ESModule ,webpack 等打包工具,已经“聪明”到,直接就能够 tree-shaking 了?不论包的 export 以及 import 怎么写?
谢谢!
1
mxT52CRuqR6o5 2022-03-16 10:54:28 +08:00 via Android
看 webpack 文档里的说明
|
2
hronro 2022-03-16 11:04:31 +08:00
如果我没记错的话,Webpack 本身是不能做 tree-shaking 的,它只会对一个 module 的每个 export 做一个使用情况的标记 ,最后依赖 uglify 这样的插件来做 tree-shaking ,所以 Webpack 的 tree-shaking 效果一直不理想。如果想要更好的 tree-shaking ,可以考虑用 Rollup 这样的工具。
|
3
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 实现 |