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：

webpack：

打包大小

parceljs:

webpack:

从对比结果能够看出，Parceljs在构建速度上确实比webpack要快不少,而在打包出来的大小上面，webpack打出来的包彷佛要比parceljs打出来的包更小。。若是发现上面的内容有什么不对的地方，请指出，谢谢～