Parceljs和Webpack在React项目上打包速度对比-阿里云开发者社区

开发者社区> 开发与运维> 正文

Parceljs和Webpack在React项目上打包速度对比

简介:

最近这几天前端圈子估计都被Parceljs刷屏了。Parceljs主要特点为:

  • 极速构建
  • 零配置

更多关于Parceljs的内容,请点这里

在Parcejs的官方网站上给出了与其它的打包工具的构建速度的对比结果,但是并没有给出测试的项目地址,所以花了点时间在React上做了下面的测试。

环境

node版本:v9.2.1

npm版本:5.6.0

项目地址

parceljs-react

webpack-react

两个项目都非常小,一共只有4个组件。引入了react的路由。

配置文件

parceljs没有配置

webpack的配置如下:

var path = require('path')
module.exports = {
   entry: './index.js',
   output: {
     path: path.resolve(__dirname, 'dist'),
     filename: 'bundle.js'
   },
  resolve: {
    extensions: [".js", ".json", ".jsx"],
    alias: {
      components: path.resolve(__dirname, 'src/components/')
    }
  },
   module: {
     rules:[{
       test: /\.jsx?$/,
       use: 'babel-loader'
     }]
   }
}

对比结果

速度

parceljs:

5165d83f70d1924191e5fe52d5c459ec868759df

webpack:

e25a2e1f11e338c06991eb6e697eb543741852ec

打包大小

parceljs:


bbe7cd15c5a7db44b14f4e6328c62d209a0ce3da

webpack:

445754a1d88ad91bf212071893cb622fa97d453c

从对比结果可以看出,Parceljs在构建速度上确实比webpack要快很多,而在打包出来的大小上面,webpack打出来的包似乎要比parceljs打出来的包更小。 如果发现上面的内容有什么不对的地方,请指出,谢谢~


原文发布时间为:2017/12/09
原文作者: 我是钟钟
本文来源:开源中国 如需转载请联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章