横空出世的Parcel近日成为了前端圈的又一大热点,在短短几周内就获得了13K的Star。
作为前端构建工具新人的Parcel为什么能在短期内获得这么多赞同?他和老大哥Webpack比起来到底有什么优势呢?

我花了6个月的时间写了一本全面介绍Webpack的图书《深入浅出 Webpack》近日刚出版,感觉被新出的Parcel给腰斩了。
但本文将本着公平公正的心态来详细对比一下他两,让你能明白他们直接的异同和优缺点对比,好决定是选Parcel还是Webpack。

为了对比他两,我们从实际出发举一个实战项目为例子,分别用Parcel和Webpack去实现,实战项目要求如下:

  • 项目采用TypeScript+React+SCSS;
  • 项目采用了Antd UI组件库,但要做到按需加载只用到了的组件,而不是所有组件都打包进去;
  • 项目使用了Lodash库,用于检查构建是否有剔除无用代码的能力(TreeShaking);
  • 构建需要支持模块热替换功能,以提高开发效率;
  • 支持SourceMap,以方便调试;
  • 对比他们的首次启动速度和监听变化时的构建速度;
  • 在生成环境下需要压缩JS、CSS,CSS需要提取到单独到文件,并对比他们在生产环境下构建出文件大小;
  • 需要生成自动会加载对应资源的HTML文件;

Parcel让人眼前一亮

在用了很久Webpack后用Parcel的感觉就像用了很久Android机后用iPhone,不用再去操心细节和配置,大多数时候Parcel刚刚够用而且用的很舒服。

用Parcel去完成以上项目的要求,我只是专心去写项目页面所必须的代码,Parcel智能快速的帮我构建出了能正常运行的结果。

以下是Parcel让我心动的点:

  • Parcel能做到无配置完成以上项目构建要求;
  • Parcel内置了常见场景的构建方案及其依赖,无需再安装各种依赖;
  • Parcel能以HTML为入口,自动检测和打包依赖资源;
  • Parcel默认支持模块热替换,真正的开箱即用;

而反观Webpack,比Parcel要麻烦很多:

这个项目我用Parcel时花在构建配置上的时间不到一分钟,而用Webpack构建时花了5分钟去配置。

Parcel还需要时间去打磨

通过以上项目实践,发现Parcel目前有如下明显的缺点:

  • 不支持SourceMap:在开发模式下,Parcel也不会输出SourceMap,目前只能去调试可读性极低的代码;
  • 不支持剔除无效代码(TreeShaking):很多时候我们只用到了库中的一个函数,结果Parcel把整个库都打包了进来;
  • 一些依赖会让Parcel出错:当你的项目依赖了一些Npm上的模块时,有些Npm模块会让Parcel运行错误;

Parcel需要为零配置付出代价

零配置其实是把各种常见的场景做为默认值来实现的,这虽然能节省很多工作量,快速上手,但这同时会带来一些问题:

  • 不守规矩的node_module:有些依赖的库在发布到Npm上时可能不小心把.babelrcpostcss.config.js tsconfig.json这些配置文件也一起发布上去了,
    由于目前Parcel只要在目录中发现这些配置文件就会认为该项目中的代码需要被处理。例如mini-store这个库中就把.babelrc文件发布到了Npm上,项目依赖的本来是lib中已经编译成了ES5的JS代码了,但Parcel还会去用Babel处理一遍。
    Npm官方并没有规定发布到Npm上的包需要符合哪些规范,这会让Parcel很为难。
  • 不灵活的配置:零配置的Parcel关闭了很多配置项,在一些需要的配置的场景下无法改变。例如:

Parcel使用场景受限

目前Parcel只能用来构建用于运行在浏览器中的网页,这也是他的出发点和专注点。
在软件行业不可能存在即使用简单又可以适应各种场景的方案,就算所谓的人工智能也许能解决这个问题,但人工智能不能保证100%的正确性。

反观Webpack除了用于构建网页,还可以做:

构建速度和输出文件大小对比

分别去用Parcel和Webpack构建以上项目,收集的数据如下:

数据项 Parcel Webpack
生成环境构建时间 8.310s 9.58s
开发环境启动时间 5.42s 8.06s
监听变化构建时间 3.17s 2.87s
生成环境输出JS文件大小 544K 274K
生成环境输出CSS文件大小 23K 23K

从以上数据可以看出:Parcel构建速度快,但Parcel输出文件大

导致Parcel构建速度快的原因和iOS比Android用起来更流畅的原因类似:

  • Parcel因为一体化内置,所以集成和优化的更好,而Webpack通过插件和Loader机制去让第三方扩展这会拉低性能;
  • Parcel内置多进程并行构建,而Webpack默认是单进程构建(Webpack也支持多进程);

导致Parcel输出JS文件大的原因在于:

  • 不支持TreeShaking
  • 构建出的JS中出现了所有文件的名称,如图:

以上项目完整源码可下载

总结

现阶段的Parcel就像beta版的iPhone,看上去很美好但还不能用于生成环境,如果你现在就把Parcel用于生成环境,相信我你一定会踩很多坑。
踩坑不要紧,要命的是无法在网上找到解决方法以快速解决问题。

我不是不鼓励大家使用Parcel,历史总需要先驱去推动,就像乔布斯义无反顾的引领了一个时代,我们也需要去实践Parcel,坑都是一个个填平的,所以我鼓励大家在一些个人小项目中使用Parcel。

如果Parcel能解决上面提到的这些问题,我会毫不犹豫的在我的下一个项目中使用他。


在 Github 上讨论

原文连接http://wuhaolin.cn/2017/12/27/Parcel%20Vs%20Webpack/

Parcel Vs Webpack的更多相关文章

  1. 使用parcel替代webpack制作omi-tap插件

    Parcel 是一个零配置的网络应用打包工具, 适用于经验不同的开发者, 它利用多核处理提供了极快的速度.对比 webpack 最大的两个亮点: 零配置 极快速 omi 相关的插件都是基于 webpa ...

  2. Parcel上手——又一个打包工具

    Parcel是什么? 极速零配置Web应用打包工具 说到打包工具,大多人应该都用过Webpack,Parcel也是这一类工具. Parcel相比Webpack有什么优势? 配置简单 打包速度快 以下是 ...

  3. dinoql 使用nodejs 运行的几个问题

    dinoql 是一个很不错的javascript objects 查询处理方案,基于graphql,当前版本有点问题 node 环境运行 ReferenceError: window is not d ...

  4. 从零开始学虚拟DOM

    此文主要翻译自:Building a Simple Virtual DOM from Scratch,看原文的同学请直达! 此文是作者在一次现场编程演讲时现场所做的,有关演讲的相关资料我们也可以在原英 ...

  5. 继webpack后又一打包神器Parcel

    前言: 在继grunt.gulp实现自动化构建之后,webpack又引领前端打包潮流,众所周知的是,vue-cli的脚手架就是基于webpack进行项目打包的.而webpack还在上升的势头的时候,又 ...

  6. ES6深入浅出-6 ES 6 模块-2.babel webpack parcel

    https://babeljs.io/ 复制到命令行执行 提示一个警告.缺少package.json这个文件 npm init -t ls 然后看到了生成了package.json这个文件. 然后再去 ...

  7. Rollup & Webpack & Parcel

    Rollup & Webpack & Parcel package bundler https://x-team.com/blog/rollup-webpack-parcel-comp ...

  8. Parcel.js + Vue 2.x 极速零配置打包体验

    继 Browserify.Webpack 之后,又一款打包工具 Parcel 横空出世 Parcel.js 的官网有这样的自我介绍 “极速零配置Web应用打包工具” 简单接触了一下,单从效率上来说,确 ...

  9. Parcel:常见技术栈的集成方式

    前言 Parcel 是什么 Parcel 是一个前端构建工具,Parcel 官网 将它定义为极速零配置的Web应用打包工具.没错,又是一个构建工具,你一定会想,为什么前端的构建工具层出不穷,搞那么多工 ...

随机推荐

  1. django 快捷代码提示

    1.右键项目,Mark Directory As Source Root 2.settings配置 3.import包时可忽略app名了

  2. centos 安装jenkins

    1.Java jdk安装 安装之前先检查一下系统有没有自带open-jdk 命令: rpm -qa |grep java rpm -qa |grep jdk rpm -qa |grep gcj 如果没 ...

  3. Linux中Consul集群部署

    分配三台虚拟机: 192.168.5.125 192.168.5.128 192.168.5.129 在每台虚拟机上创建  /usr/consul 文件件  命令: mkdir /usr/consul ...

  4. S.O.L.I.D原则

    SILID原则: 是面向对象编程和设计的重要原则,在我们编程的过程中是谨记的重点,所以对其有深刻了解是必须的.   < Clean Code(代码整洁之道)>作者Robert C. Mar ...

  5. django shortcut function

    render() render(request, template_name, context=None, content_type=None, status=None, using=None) 必须 ...

  6. 【OCP-12c】CUUG最新考试原题整理及答案(071-11)

    11.(5-8) choose the best answer: Examine the structure of the BOOKS_TRANSACTIONS table. You want to ...

  7. kvm虚拟机时间配置

    注:在虚拟化环境中,虚拟机在长时间运行过程中,时间会变慢,通常的作法是配置ntpdate定时与时间服务器进行时间同步的计划任务. KVM虚拟机默认采用utc时间,需要专门修改,以及考虑kvm时间同步问 ...

  8. PTA 7-2 深入虎穴 (30 分)

    著名的王牌间谍 007 需要执行一次任务,获取敌方的机密情报.已知情报藏在一个地下迷宫里,迷宫只有一个入口,里面有很多条通路,每条路通向一扇门.每一扇门背后或者是一个房间,或者又有很多条路,同样是每条 ...

  9. Spring定时任务执行

    备注:这个是基于搭建好spring的环境下的 注解方式: 1.定时任务类 package com.test;import java.util.Date;import org.springframewo ...

  10. linux的档案权限和目录配置

    Linux一般将档案可存取的身份分为三个类别,分别是 owner/group/others /etc/passwd  账号信息 /etc/shadow 个人密码 /etc/group    组名记录 ...