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打出來的包更小。。若是發現上面的內容有什麼不對的地方，請指出，謝謝～