🚀述说Parcel:一个快速的零配置的web打包工具 📦

326 阅读4分钟

这篇文章总字数:1214,普通阅读4分钟,速读2分钟,主要讲的是新的打包工具parcel的一些新特性,谢谢,有兴趣朋友可以关注一下我的github上面有30多篇文章,喜欢的可以watch或者star。你的支持是我输出的动力。

前言

今天很高兴来讲一下新的打包工具parcel,一个快速的,零配置的打包工具。可以点击这里看他的github.

为了解决现有webpack等打包工具存在的问题:性能和配置复杂度。我开始研究parcel。

以webpack举例,我认为打包工具是用来减轻前端负担的,但是在webpack上我并没有感觉到,除了需要学习webpack外,配置的时候还是要查询中文文档,因为太多的插件根本不适合记忆,还有性能方面,当页面足够多时,打包的速度开始变得很慢,我记得我们公司一个运营中心的项目,打包时间惨目忍睹。

特点

  • 🚀打包速度快——多核编译,以及文件系统缓存,即使在重新启动后也能快速重建。
  • 📦支持JS,CSS,HTML,图像,文件资产等等——不安装插件
  • 🐠当我们需要时使用Babel,PostCSS和PostHTML自动转换模块——甚至是node_modules包
  • ✂️使用动态import()语句进行零配置代码的分割
  • 🔥编译项目的时候支持热更新模块
  • 🚨友好地错误日志体验——语法高亮有助于我们追踪问题

性能

首先我想说的就是性能,我上面已经说了,当一个项目有好多个页面的时候,你的打包速度真的是慢,webpack也是一样,一个项目要打包上线,这里花的时间,都可以早点下班了,开发过程中也是一样,不过本地的话,你还可以给打包单一几个页面。

很多打包工具都注重于能快速的重新构建,这是伟大的,但是,初次构建的性能对于开发和生产来说是很重要的

parcel解决了这个问题,在编译过程中,并行的编译代码,并使用现代的多核处理器解决这个问题。上述原因影响了初步构建的速度。他也有文件缓存系统,以便于快速的重建。

Based on a reasonably sized app, containing 1726 modules, 6.5M uncompressed. Built on a 2016 MacBook Pro with 4 physical CPUs.

零配置体验

第二个原因就是帮助我们减轻配置的负担,大多数打包工具是围绕着配置文件建立起来的,配置文件有很多的插件。一个webpack的打包工程500行代码,已经不是什么稀罕的事情了。

这种配置不仅繁琐耗时,而且你不能保证你一定是正确的,还得参照规范改,这可能导致优化应用程序而影响正常的生产

parcel被设计为零配置:只需要应用程序入口给它,他就可以正确的打包。Parcel支持JS,CSS,HTML,图像,文件资产等等 - 不需要任何插件。

parcel的零配置体验还体现在不局限于文件格式,当parcel检测到一个.babelrc, .postcssrc等文件,就会自动转化相应模块,比如Babel, PostCSS和PostHTML。这甚至适用于仅用于该模块的node_modules中的第三方代码,因为应用的使用者,不需要知道构建的时候每一个模块是如何导入的。并且这次构建也没有必要让Babel在每一个文件上的运行

最后,parcel也很好的支持一些先进的打包功能,像代码拆分,热更新等。在生产模式中,还支持自动压缩,未来也可能加入像tree-shaking等优化

未来发展的前景

开启新项目的好处就是,parcel可以使用现代的体系结构,没有历史包袱,并且在这个体系结构上扩展,更加灵活,并支持代码拆分和热更新等功能。

现在主流的打包工具还是主要关注JavaScript,比如webpack,其他类型的文件也要通过loader将其变成JavaScript来进行打包。

但在parcel中,任何类型的文件都有机会成为一等公民,很容易可以添加一种新类型输入文件,并将类似类型的文件组合到输出文件中

你可以在这个网站上了解更多关于parcel如何工作的

尝试一下吧!!

parcel才刚刚开始就收到大众追捧,尝试一下吧