文档章节

下一代前端打包工具-Parcel介绍

我是钟钟
 我是钟钟
发布于 2017/12/07 15:25
字数 991
阅读 789
收藏 8

Parcel的特性

  • 快速打包 - 多核编译,以及文件系统缓存,即使在重新启动之后也能快速重新构建。
  • 支持JS,CSS,HTML,文件资源等- 不需要安装任何插件。
  • 在需要的时候自动使用Babel,PostCSS和PostHTML自动转换模块 - 甚至是node_modules。
  • 零配置代码拆分,使用动态import语句分割。
  • 内置支持模块热替换
  • 友好的错误记录体验,语法突出显示的代码帧有助于查明问题。

比较

基于一个合理大小的应用程序,包含1726个模块,未压缩有6.5M 。构建在2016年的MAcBook Pro,4核物理CPU。

| 打包工具 | 时间 |

| ----------------------- | --------- |

| browserify       | 22.98s |

| webpack           | 20.71s |

| parcel | 9.98s |

| parcel - with cache | 2.64s |

为什么需要Parcel?

目前已经有很多的打包工具了,包括webpack和browserify。那么为什么我们还需要另外一个呢?主要原因是因为开发者的经验。

许多的打包工具都是围绕着配置和插件构建的,而且为了让应用正常的工作,超过500行的配置并不罕见。这些配置不仅繁琐而且耗时。通常情况下,这可能导致次优化的应用发送到生产环境。parcel被设计成零配置的:只需要将它指向应用程序的入口点,它就能正常工作。

目前现存的打包工具都非常慢。拥有大量文件和依赖的大型应用可能需要花费几分钟的时间来构建,这在开发过程中随着时间的变化而变得尤为痛苦。监听文件变更能够帮助重新构建,但初始的启动仍然非常慢。parcel利用工作线程编译你的代码,利用现代的多核处理器能力。这导致了初始构建的速度大大提升。它还具有一个文件系统缓存,可以保存每一个文件的编译结果,以便后续能够更快的启动。

最后,现有的打包工具都是围绕字符串加载/转换构建的,其中转换需要一个字符串,解析它,进行一些转换,然后再次生成代码。通常这样会导致许多的解析和代码生成在单个文件上运行,这是非常低效的。相反,parcel的转换工作在AST上,因此每个文件只有一个解析,多个转换以及一个代码生成。

Parcel如何工作的?

parcel将资源树转换为bundle树。许多其它的打包工具基本上都是基于js资源,其它格式都是粘贴的-例如,默认情况下以字符串的形式内嵌到js中。parcel是文件类型无关的-它可以按照你期望的方式与任何类型的资源一起工作,无需配置。

parcel将一个入口点作为输入,可以是任何类型的:JS文件,HTML,CSS,图片等。在parcel中定义了各种资源类型,它们知道如何处理特定的资源类型。资源文件被解析,它的依赖关系被提取,并转换成最终的编译形式。这创建了一个资源树。

一旦资源树被构建,资源就被放入一个bundle树中。为入口资源创建一个bundle,并为动态导入的资源创建子bundle,这回导致代码拆分的发生。当导入不同类型的资源的时候就会创建子bundle,例如如果你在js中导入css文件,它就会打包成对应js的兄弟bundle。如果一个资源需要多个bundle,它会被打包到最近的共同祖先,因此它不会被包含多次。

在构建bundle树之后,每一个包都有特定的文件类型的包装器写入文件。

© 著作权归作者所有

共有 人打赏支持
我是钟钟
粉丝 51
博文 43
码字总数 40311
作品 1
深圳
高级程序员
私信 提问
2018前端值得关注的几个趋势

1.前言 2017悄然过去,2018已经来到。人在进步,技术在发展。2018年前端有哪些领域,技术值得关注,哪些技术会兴起,哪些技术会没落。下面就我个人的判断进行一个预测判断,希望能对大家起到...

01/08
0
0
前端又双叒叕一个打包工具——parceljs

前端你懂的, 隔断时间不造个轮子会死人。 为了解决什么问题 同样的parcel官网首页的一句话基本就说清楚了为什么要用它 Blazing fast, zero configuration web application bundler 快速和零...

Kurset
2017/12/12
0
0
Parcel Vs Webpack

爱折腾的前端圈时常会有新轮子诞生,只要是好东西就能快速获得大量关注,资历再好的大哥只要不如新人也很快会被替代。 横空出世的Parcel近日成为了前端圈的又一大热点,在短短几周内就获得了...

2017/12/27
0
0
使用Parcel零配置创建React应用(译)

最近经常在一些大牛博客里看他们提到 Parcel,下意识关注一波,Parcel 官网介绍比较简单,官网里看到一篇入门博客,遂译之。 我们都经历过创建 React 项目时的痛苦,在能够正式编码之前需要花...

dkvirus
02/22
0
0
更优雅的使用 Parcel 进行前端项目的打包

Parcel 有着开箱即用的特性, 为我们初始化工程省却了许多时间, 但是零配置的特性导致我们比较不方便进行一些预处理, 这篇文章就带领读者解决一些我们常会遇到的一些问题. 只需要很简单的添加...

超级大柱子
07/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

不可不说的Java“锁”事

前言 Java提供了种类丰富的锁,每种锁因其特性的不同,在适当的场景下能够展现出非常高的效率。本文旨在对锁相关源码(本文中的源码来自JDK 8)、使用场景进行举例,为读者介绍主流锁的知识点...

美团技术团队
23分钟前
1
0
ali oss util demo

package com.example.demo;import com.aliyun.oss.OSSClient;import com.aliyun.oss.common.utils.BinaryUtil;import com.aliyun.oss.model.*;import org.slf4j.Logger;import o......

经常把天聊死的胖子
25分钟前
1
0
Windows系统中eclipse修改字体为Courier New

背景:在eclipse修改字体时没有找到Courier New字体; 解决: 1.在计算机地址栏上输入“C:\Windows\Fonts”路径,回车打开Win10字体文件夹。查看是否有Courier New字体;如下图: 2.如果有该...

anlve
26分钟前
1
0
使用hexo做博客网站

hexo有什么用? hexo 可以把md文件生成html静态网页。 hexo官网:https://hexo.io/zh-cn/ 本地安装hexo。 npm install -g hexo-cli#生成blog(名字任意)文件夹,并且在这个文件夹里面初始化...

王坤charlie
26分钟前
2
0
RabbitMQ+PHP 教程四(Routing)用yii2测试通过

开始 在本教程中,我们将为它添加一个特性——我们将只可能订阅消息的一个子集。例如,我们只能够将关键错误消息直接指向日志文件(以节省磁盘空间),同时仍然能够打印控制台上的所有日志消...

hansonwong
30分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部