什麼是扁平捆綁，爲什麼Rollup比Webpack更好？

Question

我最近一直在調查rollup，看它與Webpack和其他打包商有什麼不同。我遇到的一件事是，由於「扁平捆綁」，圖書館更好。這是基於tweet和a recent PR for React to utilize Rollup。

根據我的經驗，Rollup在建設圖書館方面更好，因爲圍繞平面捆紮（例如提升）有更好的優化。 1/2

Webpack 2可能會更好，如果你捆綁應用程序與代碼分裂等。 2/2

我不完全確定我明白這是什麼意思。扁平捆綁是指什麼？我知道Rollup的文檔提到treeshaking以幫助減少包的大小，但Webpack also has a way of doing this。也許我完全不理解這個概念。

請注意，這不是一個關於Rollup vs Webpack的比較問題。對於那些感興趣的人，有一個comparison chart for that by Webpack。這主要是問扁平捆綁是什麼？ Rollup在內部可以做些什麼來實現這一目標？

Answer 1

編輯：WebPACK現在可支持範圍，某些情況下吊裝 - read the blog post here

我們大概都對這個東西有不同的定義，但我認爲平板捆綁僅僅意味着「把你的模塊，使之成爲一個單束' - 即，'扁平'是多餘的。 React 16最大的區別在於你會默認使用預製的包，而不是你的應用負責捆綁React的源代碼模塊（儘管總是有一個由Browserify構建的prebuilt UMD bundle of React available）。

相反，兩者之間的巨大差異是在模塊邊界處發生的。 webpack的工作方式是將每個模塊封裝在一個函數中，並創建一個實現加載器和模塊緩存的bundle。在運行時，依次評估每個模塊函數以填充模塊高速緩存。該體系結構具有許多優點 - 可以實現代碼分割和按需加載以及熱模塊替換（HMR）等高級功能。

彙總採用了不同的方法 - 它將您的所有代碼放在同一級別（根據需要重寫標識符以避免變量名稱之間的衝突等）。這通常被稱爲'範圍吊裝'。正因爲如此，沒有每個模塊的開銷，也沒有每個bundle的開銷。你的包保證更小，並且也會更快地評估，因爲間接性較差（更多信息，請參閱 - The cost of small modules）。這種折衷是這種行爲依賴於ES2015模塊語義，這意味着一些webpack的高級功能實現起來要困難得多（例如Rollup不支持代碼分割，至少現在還不支持！）。

總之，是的WebPack通常爲應用更好的貼合，並彙總爲通常圖書館的更好配合。

我已經放在一起small gist illustrating the differences。您還可以通過tinkering with the Rollup REPL感受Rollup的輸出。