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。