首先：Tree Shaking只支持ES模塊的使用，不支持require這種動(dòng)態(tài)引入模塊的方式。

exports和module.export區(qū)別：

• exports：對(duì)于本身來(lái)講是一個(gè)變量（對(duì)象），它不是module的引用，它是{}的引用，它指向module.exports的{}模塊。默認(rèn)指向 module.exports 的內(nèi)存空間，只能使用.語(yǔ)法 向外暴露變量。
• module.exports：module是一個(gè)變量，指向一塊內(nèi)存，exports是module中的一個(gè)屬性，存儲(chǔ)在內(nèi)存中，然后exports屬性指向{}模塊。既可以使用.語(yǔ)法，也可以使用=直接賦值。
  require() 返回的是 module.exports 而不是 exports

CommonJS用同步的方式加載模塊。在服務(wù)端，模塊文件都存放在本地磁盤，讀取非?？?，所以這樣做不會(huì)有問(wèn)題。但是在瀏覽器端，限于網(wǎng)絡(luò)原因，更合理的方案是使用異步加載。

ES6的模塊不是對(duì)象，import命令會(huì)被 JavaScript 引擎靜態(tài)分析，在編譯時(shí)就引入模塊代碼，而不是在代碼運(yùn)行時(shí)加載，所以無(wú)法實(shí)現(xiàn)條件加載。也正因?yàn)檫@個(gè)，使得靜態(tài)分析成為可能。

CommonJS 模塊輸出的是一個(gè)值的拷貝，ES6 模塊輸出的是值的引用

• CommonJS 模塊輸出的是值的拷貝，也就是說(shuō)，一旦輸出一個(gè)值，模塊內(nèi)部的變化就影響不到這個(gè)值。
• ES6 模塊的運(yùn)行機(jī)制與 CommonJS 不一樣。JS 引擎對(duì)腳本靜態(tài)分析的時(shí)候，遇到模塊加載命令import，就會(huì)生成一個(gè)只讀引用。等到腳本真正執(zhí)行時(shí)，再根據(jù)這個(gè)只讀引用，到被加載的那個(gè)模塊里面去取值。換句話說(shuō)，ES6 的import有點(diǎn)像 Unix 系統(tǒng)的“符號(hào)連接”，原始值變了，import加載的值也會(huì)跟著變。因此，ES6 模塊是動(dòng)態(tài)引用，并且不會(huì)緩存值，模塊里面的變量綁定其所在的模塊。

CommonJS 模塊是運(yùn)行時(shí)加載，ES6 模塊是編譯時(shí)輸出接口

CommonJS 加載的是一個(gè)對(duì)象（即module.exports屬性），該對(duì)象只有在腳本運(yùn)行完才會(huì)生成。而 ES6 模塊不是對(duì)象，它的對(duì)外接口只是一種靜態(tài)定義，在代碼靜態(tài)解析階段就會(huì)生成。

• 運(yùn)行時(shí)加載: CommonJS 模塊就是對(duì)象；即在輸入時(shí)是先加載整個(gè)模塊，生成一個(gè)對(duì)象，淺拷貝緩存到內(nèi)存中，然后再?gòu)倪@個(gè)對(duì)象上面讀取方法，這種加載稱為“運(yùn)行時(shí)加載”。下次加載文件時(shí)，直接從內(nèi)存中取值。
• 編譯時(shí)加載: ES6 模塊不是對(duì)象，而是通過(guò) export 命令顯式指定輸出的代碼，import時(shí)采用靜態(tài)命令的形式。即在import時(shí)可以指定加載某個(gè)輸出值，而不是加載整個(gè)模塊，這種加載稱為“編譯時(shí)加載”。模塊內(nèi)部引用的變化，會(huì)反應(yīng)在外部。

• ES Module 是編譯時(shí)執(zhí)行，而 CommonJS 模塊是在運(yùn)行時(shí)加載;
  ES Module 最大的特點(diǎn)就是靜態(tài)化，在編譯時(shí)就能確定模塊的依賴關(guān)系，以及輸入和輸出的值，這意味著模塊的依賴關(guān)系是確定的，和運(yùn)行時(shí)的狀態(tài)無(wú)關(guān)，可以進(jìn)行可靠的靜態(tài)分析，正是基于這個(gè)基礎(chǔ)，才使得 Tree-Shaking 成為可能!