Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🚀述说Parcel:A blazing fast, zero configuration web application bundler 📦 #30

Open
laihuamin opened this issue Jan 25, 2018 · 0 comments

Comments

@laihuamin
Copy link
Owner

laihuamin commented Jan 25, 2018

这篇文章总字数: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才刚刚开始就收到大众追捧,尝试一下吧

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant