webpack、rollup、parcel优劣？
| 对比 | Webpack | Rollup | Parcel |
|---|---|---|---|
| 功能 | 为处理资源管理和分割代码而生，可以用来处理任何类型的文件，灵活，插件多。 | 用标准化的格式（es6）来写代码，通过减少死代码尽可能地缩小包体积。 | 用标准化的格式（es6）来写代码，通过减少死代码尽可能地缩小包体积。 |
| 配置 | webpack需要配config文件，指明entry, output, plugin，transformations。 | 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。 |
webpack、rollup、parcel优劣？相关推荐
- Webpack 和 Parcel 打包辅助工具
这篇文章分享一个 Webpack 和 Parcel 打包辅助工具. 帮助大家更好的打包自己的网站. 1.Webpack 和 Parcel 是常用的前端打包软件. 两者得区别在于: Webpack 在使 ...
- 2020webpack的面试题(webpack)
关于webpack的面试题总结 为什么要总结webpack相关的面试题 随着现代前端开发的复杂度和规模越来越庞大,已经不能抛开工程化来独立开发了,如react的jsx代码必须编译后才能在浏览器中使用: ...
- webpack的面试题总结
为什么要总结webpack相关的面试题 随着现代前端开发的复杂度和规模越来越庞大,已经不能抛开工程化来独立开发了,如react的jsx代码必须编译后才能在浏览器中使用:又如sass和less的代码浏览 ...
- webpack打包 - webpack篇
@TOC# 什么是 webpack? 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地 ...
- webpack系列 —— 打包原理
为什么要使用webpack? 如今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包.为了简化开发的复杂度,前端社区涌现出了很多好的实践方法: 模块化,让我 ...
- webpack大拷问
1 webpack与grunt.gulp的不同? 三者都是前端构建工具,grunt和gulp在早期比较流行,现在webpack相对来说比较主流,不过一些轻量化的任务还是会用gulp来处理,比如单独打包 ...
- webpack面试题总结
webpack面试题总结 1. webpack与grunt.gulp的不同? 三者都是前端构建工具,grunt和gulp在早期比较流行,现在webpack相对来说比较主流,不过一些轻量化的任务还是会用 ...
- 来自未来，2022 年的前端人都在做什么?
大家好,我是若川.持续组织了6个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列& ...
- 【精读】1234- 上帝视角来看 2022 年前端趋势
来自上帝视角的总览 这是一份来自未来的文档,感谢你对前端技术领域持续关注. 编程语言趋势大观:Python 反超 JavaScript 数据来源 Github 根据 Github 的相关数据我们可以发 ...
最新文章
- 现学现卖微信小程序开发（二）
- MainWindow 简介
- 上海天氣情況及空氣質量指數
- APP模拟手势高级操作
- MFC返回的临时对象指针成因?
- Flutter通过BasicMessageChannel实现Flutter 与Android iOS 的双向通信
- Spring之项目中pofile的应用
- 服务器上批量替换html内的字符,如何批量替换字符串中的某个特定字符？
- Python 高层文件操作(shutil模块)(转载)
- 用OpenStack构建中国人寿数据中心生产云
- 如何将img镜像安装到硬盘、解决默认分区小的问题
- 蚁群算法原理及python代码实现
- 世界500强企业名称中英对照
- 【通信原理】揭开傅里叶级数与傅里叶变换的神秘面纱
- Unity3d的场景音效静音处理
- 初识swipe.js
- Java控制台banner_Spring boot 之自定义 Banner
- 字节跳动原来这么容易就能进去…
- 楚留香ai识别人脸_楚留香手游AI捏脸怎么弄_楚留香手游AI捏脸方法步骤_玩游戏网...
- 2018一瞬即逝，奋斗的日子也需要停下来，总结反思，2019也许不会更好，但不会差。