不清楚到底是怎麼基於ES6模塊 進行模塊靜態分析的？？

看不懂這句話 啊

在 CommonJS/AMD 中，你可以這樣寫：

const foo = require(`all/${["f", "o", "o"].join("")}`)
const bar = require("all/BAR".toLowerCase())
const baz = require((() =&> "all")())[() =&> "baz"]
const qux = _.get(require("all"), "qux")


這段代碼在僅僅被 parse 成 AST 時，很難分析出究竟依賴了哪些模塊，哪些介面。

import foo from "all/foo"
import bar from "all/bar"
import { baz, qux } from "all"


換成 ES Modules 以後，很容易分析出使用了哪些模塊。

另外，CommonJS/AMD 在做模塊導出時也無法靜態識別：

module.exports = {
baz: "baz",
[(() =&> "qux")()]: "qux"
}
module.exports[["f", "o", "o"].join("")] = "foo"
Object.assign(module.exports, { bar: "bar" })


你同樣無法直接分析出，這個模塊導出了幾個「介面」，各自依賴了哪些代碼。但是在 ES Modules 中，named/default exports 一目了然。對於沒有被 import 的部分，也自然很容易區分出來，在 tree-shake 中消除掉。

export class Foo {}
export let bar = "bar"
export default "all"


總之，就是通過限定語法，讓本來需要運行代碼才能確定的依賴，可以在分析 AST 階段就確定下來。

動態 == 拼字元串