说到前端构建，大家首先想到的肯定是Webpack。不愧是前端建设的老大哥。但是社区中还有许多其他优秀的构建工具。它们可能不像Webpack那样“一体化”，但它们都有一些独特的优势。如果你觉得在某些特定场景下使用Webpack过于臃肿，那么你或许可以考虑下面的一些工具。Parcel是一款名为“0配置”的打包工具。Rust重写JS/CSSTransformer，进一步提高构建效率。Parcel代码非常“模块化”，内置了很多插件来完成各种任务。用户可以根据自己的需要使用不同的内置插件，只要在.parcelrc文件中配置即可，parcel会自动读取这个配置文件，但是需要注意的是.parcelrc是JSON5格式的文件。文件类型和Webpack的区别在于，在Parcel中，所有文件都是一等公民，一视同仁。因此，用户不需要为不同类型的文件配置各种Loader。Parcel将帮助您处理不同类型的文件。支持JS/TS/JSX/TSX。Parcel2.0开始使用Rust实现的JSTransformer，可以更高效地进行翻译。也支持转ES5，也可以支持React17新的JSX。此外，还支持Minification、TreeShaking等。它支持CSS，功能与CSSLoader基本一致。还支持多种CSS预处理语言，如TreeShaking、Minification等，另外还支持以文本形式导入CSS资源，方便用户手动将CSS放入StyleTags中。值得一提的是，Parcel2.0也使用了Rust来实现CSSTransformer。支持HTML。支持Vue，全面支持Vue3语法。支持图片，丰富的图片文件处理，支持图片类型转换和裁剪。...构建功能支持CodeSplitting，但是和esbuild一样，只能支持比较有限的拆分逻辑。多个条目引用的共享模块或使用import()动态导入的模块将被拆分为单独的块。支持摇树。支持范围提升机。支持缩小。支持压缩，可以生成两种压缩格式的产品，Gzip和Brotli。支持InlineBundle，即翻译后的资源可以以文本或其他格式导入，比如上面提到的以文本格式导入编译后的CSS文件，也可以直接以dataURL格式导入二进制文件等。支持DevServer、HMR等处于开发阶段。支持浏览器缓存，产品文件名默认携带文件内容hash。支持差异化构建，默认同时构建ESM和非ESM产品。...优点零配置，告别繁琐的工程配置，满足绝大部分场景。Rust用于JS和CSS的翻译，效率会有所提升。缺点是扩展性不强，几乎没有类似于Webpack的开放插件特性。因此，如果在这个阶段遇到Parcel无法实现或者有bug的情况，用户只能等待Parcel完成。使用对比打包React+Threejs项目，Webpack:Parcelfirstbuild:Parcelnon-firstbuild:Parcel会生成一个.该功能也内置于Webpack5.0中，并且不是一项独特的功能。从产品量上看，双方大致势均力敌。总结一下，Parcel目前最大的卖点就是无需配置，用户体验真的很好。在性能方面，使用Rust改造后，相信以后会有很大的提升。它可以开箱即用，满足很多场景，但是良好的封装带来的副作用是扩展性差，所以Parcel对于有大量定制化构建需求的大型项目现阶段可能不是一个好的选择。RollupRollup是一个流行的库打包器。它比Webpack晚几年出现，也是在ESM之后出现的。它的主要特点是可以支持和鼓励开发者使用ESM模块语法进行开发。文件类型几乎只支持JS，其他类型的文件需要使用插件来处理。特性Rollup尊重ESM模块标准的发展。ESM的浏览器也支持此功能。Rollup打包出来的产品要比Webpack干净很多。比如同一个项目打包product:Webpackproduct:Rollupproduct:可以看到Webpackproduct里面有很多__webpack_require__等代码，这些都是Webpack自带的Polyfill的runtime模块加载，只是为了让product的代码可以在所有浏览器中运行，因为wepack出现的时候还没有ESM，那时候的模块标准还比较混乱，Webpack抹平了差异。使用IIFE来实现模块之间的隔离，并使用__webpack_require____webpack_exports__等Polyfill来模拟浏览器环境下的CJS模块加载，所以我们用Webpack打包的代码其实更像是运行在Webpack为我们实现的“虚拟运行时”上.Rollup是在ESM模块标准出来之后诞生的，所以Rollup完全符合ESM标准，不需要像Webpack那样做大量的RuntimePolyfill，完全把代码交给浏览器去运行。一些项目依赖的CJS包，这些依赖也可以通过插件处理“Rollup”，精简后的产品体积也比“webpack”小。另外，对于多入口打包或者动态导入packages，我们也会分包，我们可以直接使用[output.manualChunks](https://rollupjs.org/guide/en/#outputmanualchunks)自定义chunks，插件系统Rollup一共提供了25个Hooks读取参数到构建输出产品，这足以满足大部分场景，而且目前社区中有大量的插件，应该几乎都有，因为Rollup本身只会Javascript，所以我们会需要在实际使用过程中配置更多的插件来满足我们的场景，尤其是工程文件类型比较多样化的时候。总结Rollup总体来说是一款优秀的打包工具，产品精简，ESM兼容，插件体系丰富，社区生态良好。它是一个非常现代的WebBundler。但是相应的，他需要一个支持ESM标准的浏览器，所以低版本浏览器实在是没办法（希望天上没有低版本浏览器）
