Webpack vs Parcel - 腾讯云开发者社区

文章/答案/技术大牛

发布

Parcel Vs Webpack

他和老大哥Webpack比起来到底有什么优势呢？我花了6个月的时间写了一本全面介绍Webpack的图书《深入浅出 Webpack》近日刚出版，感觉被新出的Parcel给腰斩了。...但本文将本着公平公正的心态来详细对比一下他两，让你能明白他们直接的异同和优缺点对比，好决定是选Parcel还是Webpack。...让人眼前一亮在用了很久Webpack后用Parcel的感觉就像用了很久Android机后用iPhone，不用再去操心细节和配置，大多数时候Parcel刚刚够用而且用的很舒服。...分别去用Parcel和Webpack构建以上项目，收集的数据如下：数据项 Parcel Webpack 生成环境构建时间 8.310s 9.58s 开发环境启动时间 5.42s 8.06s 监听变化构建时间...，而Webpack默认是单进程构建（Webpack也支持多进程）；导致Parcel输出JS文件大的原因在于：不支持TreeShaking 构建出的JS中出现了所有文件的名称，如图： ?

2.2K2 2

webpack vs babel

Webpack 和 Babel 是前端开发中常用的两个工具，但它们有不同的主要功能和定位： Webpack 1. 类型：模块打包工具（Module Bundler） 2....结合使用在现代前端项目中，Webpack 和 Babel 通常会结合使用，发挥各自的优势： • Webpack：负责打包模块、处理各种资源文件、优化构建结果。...安装必要的包：npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env 2....配置 Webpack（webpack.config.js）：const path = require('path'); module.exports = { entry: '....通过结合使用 Webpack 和 Babel，可以实现现代前端开发的模块化、优化和兼容性支持。

3551 0

您找到你想要的搜索结果了吗？

是的

没有找到

懒人Parcel

作者: Devongovett Github: parcel Medium: medium API: api 为了解决在 Browserify 和 Webpack 等现有模块打包工具中遇到的两个主要问题...{ "presets": ["env", "react"] }{ "presets": ["env", "preact"] } VS Webpack Parcel 能做到无配置完成以上项目构建要求...； Parcel 内置了常见场景的构建方案及其依赖，无需再安装各种依赖； Parcel 能以 HTML 为入口，自动检测和打包依赖资源； Parcel 默认支持模块热替换，真正的开箱即用；而反观 Webpack...构建速度快，但 Parcel 输出文件大导致 Parcel 构建速度快的原因和 iOS 比 Android 用起来更流畅的原因类似： Parcel 因为一体化内置，所以集成和优化的更好，而 Webpack...通过插件和 Loader 机制去让第三方扩展这会拉低性能； Parcel 内置多进程并行构建，而 Webpack 默认是单进程构建 ( Webpack 也支持多进程 )；导致 Parcel 输出 JS

2.6K1 0

Parcel.js + Vue 搭建笔记

---- Vue 官方提供的模板 vuejs-template/webpack 是基于 Webpack 打包的。所以尝试着用 parcel.js 来替代 webpack 与 vue 结合在一起。...: Vue + Parcel 实现的小应用过程初始化基本可以参照 vuejs-template/webpack 进行修改。...vue init webpack vue-parcel-demo 使用 vue 脚手架生成 webpack 模板 ? Project name vue-parcel-demo ?...如果使用 VS Code 编辑器，也可以对工作区进行配置，不对 .cache dist 等文件夹进行搜索。...FAQ 运行时 + 编译器 vs. 只包含运行时在使用 vue 脚手架 vue init webpack vue-parcel-demo 生成 vue-webpack 模板过程中，有如下提示： ?

1K3 0

Parcel源码上手

Parcel作为Android Binder通信的基础，从源码的角度，了解下parcel的特性，还是很有必要的。...Serializable vs Parcelable 这两者都是Android的序列化方式，不过还是有很大的区别的 Serializable的底层是通过IO来实现的，序列化是通过ObjectOutputStream...static jlong android_os_Parcel_create(JNIEnv* env, jclass clazz) { Parcel* parcel = new Parcel();...*>(nativePtr); //nativePtr其实就是parcel指针的值，可以转成parcel指针 if (parcel !...* parcel = reinterpret_castParcel*>(nativePtr); //一样的，通过指针的long类型值转成parcel指针 if (parcel !

8812 0

新一代构建工具(1)：对比rollupparcelesbuild—esbuild脱颖而出

- Roscoe的回答 - 知乎https://www.zhihu.com/question/263676981/answer/272288889webpack之外的打包工具（Rollup，Parcel...esbuild vs parcel vs rollup vs snowpack vs webpack过去一年情形 StarsIssues版本 UpdatedaCreatedaesbuild30,7932400.14.253...写插件要舒服很多rollup vs webpack如何用Webpack和Rollup进行比较的话webpack的优势在于他更加全面，基于”一切皆模块“的思想而衍生出丰富的loader和plugin可以满足各种使用场景...parcel vs webpackparcel 中的特性像是多进程、缓存等，其实都可以利用 Webpack 的一些相关模块搞定（Happypack、DllPlugin 等），但单从代码转译这一点上来说确实比...Parcel最大的优势：因为webpack的每个loader都要生成一遍AST，Parcel则不用，只需生成一次AST（相当于Parcel内置了loader，才能做此优化） esbuildesbuild

3.2K2 0

parcel和parcelable

Parcel 在英文中有两个意思，其一是名词，为包裹，小包的意思；其二为动词，意为打包，扎包。邮寄快递中的包裹也用的是这个词。Android采用这个词来表示封装消息数据。...需要明确的是Parcel用来存放数据的是内存（RAM），而不是永久性介质（Nand等）。 Parcelable,定义了将数据写入Parcel，和从Parcel中读出的接口。... dest, int flags); //读取接口，目的是要从Parcel中构造一个实现了Parcelable的类的实例处理。...public interface Creator { public T createFromParcel(Parcel source); public T[] newArray(int...public static Parcel.Creator CREATOR = new Parcel.Creator();

1K6 0

VS Code 调试完全攻略（6）：调试由 TypeScript 开发的 React

本文将向你展示如何在 VS Code 中创建匹配的调试器。 ? VS Code 调试完全攻略系列目录 ?...Parcel 你可能想知道 Webpack 或 Babel 配置文件在哪里。好吧，没有！由于 Parcel 是一个零配置的打包程序，因此我们可以直接告诉它去编译代码，并且始终有效。...配置调试器我们希望在调试时能够在 VS Code 中设置断点、启动调试浏览器、以及逐步调试获取初始列表和后续的远程请求。为了使它尽可能简单和好用，我们将利用 launch.json 文件的优势。...type 和 request 参数告诉 VS Code 在新的 Chrome 窗口中开始调试。第一次运行后，启动器的 name 将显示在调试工具栏和 IDE 的状态栏中： ?...没有这个设置，VS Code 会无法将源中的断点位置映射到运行时代码： ?

5.5K2 0

2018前端最值得关注的技术有哪些？

在2017末就出现了一个黑马：parcel。parcel出乎了大多数人的意料，也算是2017的最大惊喜之一。说到parcel的最大优势，貌似就是webpack的最大劣势：配置和性能！...parcel号称零配置，多核打包，并且使用文件缓存，在时间上比webpack快了将近10倍！...image.png 从star上面而言，Parcel的关注度似乎超过了当时了webpack，热度仍在持续。 webpack难用之处，我觉得就是配置繁琐，且文档不完善，看着也懵逼。...如果Parcel能做好这几点，说不准能从webpack里面分到不少肉。...宣布 Parcel：一个快速，零配置的 Web 应用打包工具 Parcel Vs Webpack WebAssembly 由谷歌, 微软, Mozilla，苹果等公司合作的一个面向Web的通用二进制和文本格式的项目

1.4K2 0

2018前端值得关注的技术

经过2017的发展，webpack的火热程度也是有目共睹。但是，但是。在2017末就出现了一个黑马：parcel。parcel出乎了大多数人的意料，也算是2017的最大惊喜之一。...说到parcel的最大优势，貌似就是webpack的最大劣势：配置和性能！parcel号称零配置，多核打包，并且使用文件缓存，在时间上比webpack快了将近10倍！...webpack，热度仍在持续。...webpack难用之处，我觉得就是配置繁琐，且文档不完善，看着也懵逼。至于打包时间方面，只能说没有对比就没有伤害吧。如果Parcel能做好这几点，说不准能从webpack里面分到不少肉。...宣布 Parcel：一个快速，零配置的 Web 应用打包工具 Parcel Vs Webpack 5.WebAssembly 由谷歌, 微软, Mozilla，苹果等公司合作的一个面向Web的通用二进制和文本格式的项目

1.9K15 0

2018 最值得关注的前端技术

在2017末就出现了一个黑马： parcel 。parcel出乎了大多数人的意料，也算是2017的最大惊喜之一。说到parcel的最大优势，貌似就是webpack的最大劣势：配置和性能！...parcel号称零配置，多核打包，并且使用文件缓存，在时间上比webpack快了将近10倍！ ?...（图片来源于neal的文章- 宣布 Parcel：一个快速，零配置的 Web 应用打包工具）从star上面而言，Parcel的关注度似乎超过了当时了webpack，热度仍在持续。...webpack难用之处，我觉得就是配置繁琐，且文档不完善，看着也懵逼。至于打包时间方面，只能说没有对比就没有伤害吧。如果Parcel能做好这几点，说不准能从webpack里面分到不少肉。...宣布 Parcel：一个快速，零配置的 Web 应用打包工具 Parcel Vs Webpack 5.WebAssembly 由谷歌, 微软, Mozilla，苹果等公司合作的一个面向Web的通用二进制和文本格式的项目

1.5K3 1

Parcel前端构建工具

Parcel 是 Web 应用打包工具，适用于经验不同的开发者。它利用多核处理提供了极快的速度。...https://parceljs.org/getting_started.html 配置了一个简易的web打包工具 https://github.com/MrZHLF/Parcel ? ...全局安装 Yarn: yarn global add parcel-bundler npm: npm install -g parcel-bundler 页面初始化在你正在使用的项目目录下创建一个 package.json...文件： npm init -y parcel 添加到项目中 npm install parcel-bundler --save-dev 并在根目录创建一个html文件，相当于主入口文件，在根目录根据自己的需要

1.2K4 0

Parcelable使用时java.lang.RuntimeException: Parcel android.os.Parcel@xxxx: Unmarshalling unknown typ...

最近在开发中就遇到了一个看似简单却耗费了不少排查时间的问题——在通过 Intent 传递一个自定义 Parcelable 对象时，应用在反序列化阶段崩溃，报错信息指向 Parcel 读取异常。...我为该类新增了两个字段：width 和 height（宽度和高度），并在 writeToParcel() 方法中正确添加了写入逻辑： @Override public void writeToParcel(Parcel...dest.writeInt(height); dest.writeInt(width); } 然而，在反序列化构造函数中，我遗漏了对这两个新字段的读取： private MediaItem(Parcel...当你向 Parcel 中写入数据时，系统会按顺序存储；而在反序列化时，也必须按照完全相同的顺序逐个读取。...一旦写入和读取的字段数量或顺序不匹配，就会导致：后续字段读取错位（例如把 int 当作 long 读取）抛出 Parcel android.os.Parcel@4265a958: Unmarshalling

1571 0

Parcel，零配置开发 React 应用！

webpack 已经经历三四年的发展，社区和技术趋于成熟，它已经成为了前端开发中的必备工具。那问题来了，会有新的工具来挑战 webpack 的地位吗？...各位不妨看看本文的 Parcel，说不定就是未来的主角。一开始使用 React 的痛苦想必大家都经历过。在真正进入编码之前，需要花大量的时间搞清楚如何配置 webpack。...将 webpack 配置隐藏既是它的优点，也是它的缺点。...随着项目不断地扩大，你可能想做一些高级配置，就需要将 webpack 配置从 Create React App “拖”（eject）出来，这段配置异常复杂，这就回到了老问题——webpack 还是得学习啊...比起 webpack 一堆繁琐的配置，这个要简单多了！ Parcel 或许是 Create React App 一个不错的替代。你肯定关心 parcel 现在是否足够稳定用于生产环境。

7575 0

2022 年 JavaScript 开发工具的生态

babel vs tsc 之前有对两者进行过一次比较，传送门：2022 年，Babel vs TypeScript，谁更适合代码编译。...swc vs esbuild swc 和 esbuild 都是优秀且极速的 JS/TS 编译器，性能也不相上下，很多大公司都开始在生产环境里使用它们了。...webpack 和 rollup 就好比现代打包器中的瑞士军刀。...而 parcel 提供了一种零配置的极速打包方式。它更注重简单而不是可扩展性，内部使用的是 swc 作为编译器。...如果想要轻量一点的工具，可以尝试下 Parcel。

8831 0

塔荐 | 2018 年最值得关注的 JavaScript 趋势

React vs. Vue.js ?...这里有一篇文章对React、Vue和Angular进行了很好的对比：https://medium.com/unicorn-supplies/angular-vs-react-vs-vue-a-2017...Parcel，一个有竞争力的打包工具，也相当迅速地获得了发展势头，目前它已经在GitHub上面攒到了12000颗星，开始直接威胁到Webpack的江湖地位。...Parcel的卖点是别的打包工具都变得太庞大了，而Parcel的打包速度是Webpack的2倍（使用缓存的时候快10倍）。...它还针对Webpack多少有点令人困惑的配置设置，而Parcel却不需要配置。只用把你应用的入口点指给它，它就会把事情做对了。

1.9K8 0

Cloudera Manager分发Parcel异常分析

Fayson的github：https://github.com/fayson/cdhproject 提示：代码块部分可以左右滑动查看噢 1.问题描述 ---- 在使用Cloudera Manager分发Parcel...包时一直处于激活状态不变，相关CM日志及CM界面截图如下： [gcqt452j17.jpeg] /var/log/cloudera-scm-server/cloudera-scm-server.log日志截图如下： "Parcel...cluster/parcels/products/KUDU/versions/1.4.0-1.cdh5.12.2.p0.8/commands/deactivate [j785jqkdlp.jpeg] 5.查看parcel...的分发状态 [4foq2c3o8w.jpeg] Spark2从“已分配，已激活”状态变为“已分配” 3.总结 ---- 可以通过Cloudera Manager提供的API接口来将已激活或激活状态中的parcel...参考： https://community.cloudera.com/t5/Cloudera-Manager-Installation/Parcel-not-distributed-but-have-active-state-ACTIVATING

3.8K7 0

深入理解现代前端构建工具：Webpack vs Vite

近年来，Webpack作为老牌构建工具一直占据主导地位，而Vite作为后起之秀也迅速获得了广泛关注。本文将深入比较这两大构建工具的核心原理、优缺点及适用场景，帮助开发者做出更明智的技术选型。...：成熟稳健的打包方案核心原理 Webpack采用"打包器"架构，通过以下流程工作：依赖解析：从入口文件出发构建完整的依赖图加载器处理：使用各类loader处理不同资源插件优化：通过插件系统进行各种优化操作...代码生成：输出优化后的bundle文件 // 典型webpack配置示例 module.exports = { entry: '....性能随项目增长变慢保持快速生产构建成熟稳定基于Rollup高效配置复杂度高较低插件生态极其丰富正在快速发展选型建议：选择Webpack：已有大型Webpack项目需要高度定制化构建流程...：Webpack也在吸收Vite的优点(如Module Federation) Rust工具链：esbuild/SWC等Rust工具带来性能突破结语 Webpack和Vite各有其适用场景，没有绝对的优劣之分

5360 0

parcel打包Vue.js零配置

初始化项目 // 安装脚手架 $ npm install parcel-vue -g // 初始化 $ parcel-vue project $ cd project $ npm install...build parecl官网 https://parceljs.org/getting_started.html 中文文档非常好项目地址 https://github.com/w3c-king/parcel-vue

9732 0

卷？能有搞开源打包工具的大佬们卷？

강동윤 被速度所累的parcel 为了与打包工具老大哥Webpack差异化竞争，Parcel将「零配置」作为他的卖点（对标Webpack繁琐的配置） ?...Parcel 其中，高级ES语法会根据开发者提供的browserslist目标版本降级为对应ES5语法。...Parcel团队表示，SWC比Babel快20x倍值得玩味的是，在提供benchmark秀性能时，Parcel使用了esbuild的benchmark。...而老大哥Webpack4之所以没有倒数第一，是因为倒数第一是Webpack5。 ? 「Evan」随后又更新了benchmark： ? 虽然Parcel的优势是：极简、零配置。...JS打包工具的降维打击事实上，在Webpack已经发展多年的今天，能够突出Webpack重围，占有一席之地的打包工具，都走着差异化竞争的路线。 ?

9773 0

点击加载更多

Parcel Vs Webpack

webpack vs babel

懒人Parcel

Parcel.js + Vue 搭建笔记

Parcel源码上手

新一代构建工具(1)：对比rollupparcelesbuild—esbuild脱颖而出

parcel和parcelable

VS Code 调试完全攻略（6）：调试由 TypeScript 开发的 React

2018前端最值得关注的技术有哪些？

2018前端值得关注的技术

2018 最值得关注的前端技术

Parcel前端构建工具

Parcelable使用时java.lang.RuntimeException: Parcel android.os.Parcel@xxxx: Unmarshalling unknown typ...

Parcel，零配置开发 React 应用！

2022 年 JavaScript 开发工具的生态

塔荐 | 2018 年最值得关注的 JavaScript 趋势

Cloudera Manager分发Parcel异常分析

深入理解现代前端构建工具：Webpack vs Vite

parcel打包Vue.js零配置

卷？能有搞开源打包工具的大佬们卷？

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐