V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
yazoox
V2EX  ›  前端开发

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

  •  
  •   yazoox · 2022-03-16 10:48:12 +08:00 · 962 次点击
    这是一个创建于 972 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    1. usedPackage 输出的时候,不能 export * from "...";?而且在引用的时候,也不能 import * as A from "usedPackage"; 么?

    2. 还是说,只要两个包都是 ESModule ,webpack 等打包工具,已经“聪明”到,直接就能够 tree-shaking 了?不论包的 export 以及 import 怎么写?

    谢谢!

    3 条回复    2022-03-16 22:10:51 +08:00
    mxT52CRuqR6o5
        1
    mxT52CRuqR6o5  
       2022-03-16 10:54:28 +08:00 via Android
    看 webpack 文档里的说明
    hronro
        2
    hronro  
       2022-03-16 11:04:31 +08:00
    如果我没记错的话,Webpack 本身是不能做 tree-shaking 的,它只会对一个 module 的每个 export 做一个使用情况的标记 ,最后依赖 uglify 这样的插件来做 tree-shaking ,所以 Webpack 的 tree-shaking 效果一直不理想。如果想要更好的 tree-shaking ,可以考虑用 Rollup 这样的工具。
    SoloCompany
        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 实现
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2836 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 00:23 · PVG 08:23 · LAX 16:23 · JFK 19:23
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.