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打出來的包更小。

如果發現上面的内容有什麼不對的地方，請指出，謝謝～

原文釋出時間為：2017/12/09

原文作者： 我是鐘鐘

本文來源：

開源中國 https://my.oschina.net/powertoolsteam/blog/1587811

如需轉載請聯系原作者