请问老师关于CJS和TreeShaking

Question

请问下老师，这里讲到CJS无法使用Tree Shaking，但是我在使用Rollup时看到使用了CJS进行Tree Shaking，rollup中cjs竟然也可以使用exports.xx的形式进行TreeShaking。

请问老师CJS好像也是可以使用Tree Shaking，不是说CJS是动态引入无法使用Tree Shaking吗。

我也不是特别明白为什么ROllup可以，就比如我要使用CJS引入一个工具文件的一个方法，当用户点击按钮触发事件的时候才会执行引入，可是为什么RollUp就能到达这个效果。

Answer 1

双越 2021-01-22 22:34:51

commonjs 也可以可以做到部分的 tree-shaking 的，例如 https://github.com/indutny/webpack-common-shake 

但是，因为 commonjs 毕竟是动态引入的，还是会有一些限制 https://github.com/indutny/webpack-common-shake#limitations 。这是语法的限制，无论 webpack 和 rollup 都会有。

另外，“当用户点击按钮触发事件的时候才会执行引入”—— 这个不是 tree-shaking ，这就是异步加载。

• 提问者 hy_wang #1

  可能我表达的不是很清楚，在webpack-commom-shake中找到了，我的意思是说`Dynamic import var fn = require('./lib')[Math.random()]`。这种情况。再打扰老师一下，esm我理解是在执行编译阶段就已经确定了需要进入打包的模块，而cjs在编译阶段无法完全确定到底哪些文件无用，因为编译时候并不运行代码一些存在代码可能会在运行时条件判断被require到，所以导致只能使用插件进行Tree Shaking时只能进行部分。这样理解正确吗

• 提问者 hy_wang #2

  CJS无法Tree Shaking本质 - 编译代码时导出未使用的代码无法确定在执行脚本时是否使用到了。而dynamic import意思是用户触发特定事件从而执行懒加载脚本(模块)，请问老师这样理解对吗

• 双越 回复 提问者 hy_wang #3

  你理解的没问题。