打包工具比较：webpack VS rollup VS parcel

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。