comparing-bundlers-webpack-rollup-parcel
原文：https://medium.com/js-imaginea/comparing-bundlers-webpack-rollup-parcel-f8f5dc609cfd
一句話總結特性
webpack
爲處理資源管理和分割代碼而生，可以包含任何類型的文件。靈活，插件多。
rollup
用標準化的格式（es6）來寫代碼，通過減少死代碼儘可能地縮小包體積。
parcel
超快的打包速度，多線程在多核上併發編譯，不用任何配置。
分3個方面來對比
配置
webpack和rollup都需要配config文件，指明entry, output, plugin，transformations。二者的細微區別在於：
rollup 有對import/export所做的node polyfills，webpack沒有
rollup支持相對路徑，而webpack沒有，所以得使用path.resolve/path.join。
parcel則是完全開箱可用的，不用配置。
入口文件
webpack只支持js文件作爲入口文件，如果要以其他格式的文件作爲入口，比如html文件爲入口，如要加第三方Plugin。
rollup可以用html作爲入口文件，但也需要plugin，比如rollup-plugin-html-entry。
parcel可以用index.html作爲入口文件，而且它會通過看index.html的script tag裏包含的什麼自己找到要打包生成哪些js文件。
transformations
transformations指的是把其他文件轉化成js文件的過程，需要經過transformation才能夠被打包。
webpack使用Loaders來處理。
rollup使用plugins來處理。
parcel會自動去轉換，當找到配置文件比如.babelrc, .postcssrc後就會自動轉。
搖樹優化
搖樹優化是webpack的一大特性。需要1，用import/export語法，2，在package.json中加副作用的入口，3，加上支持去除死代碼的縮小器（uglifyjsplugin）。
rollup會統計引入的代碼並排除掉那些沒有被用到的。這使您可以在現有工具和模塊的基礎上構建，而無需添加額外的依賴項或膨脹項目的大小。
parcel不支持搖樹優化。
dev server
webpack用webpack-dev-server。
rollup用rollup-plugin-serve和rollup-plugin-livereload共同作用。
parcel內置的有dev server。
熱更新
webpack的 wepack-dev-server支持hot模式。
rollup不支持hmr。
parcel有內置的hmr。
代碼分割
webpack通過在entry中手動設置，使用CommonsChunkPlugin，和模塊內的內聯函數動態引入來做代碼分割。
rollup有實驗性的代碼分割特性。它是用es模塊在瀏覽器中的模塊加載機制本身來分割代碼的。需要把experimentalCodeSplitting 和 experimentalDynamicImport 設爲true。
parcel支持0配置的代碼分割。主要是通過動態improt。