Parceljs和Webpack在React專案上打包速度對比

zhongzhong05發表於2019-03-01
JSWebReact

最近這幾天前端圈子估計都被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：

Parceljs和Webpack在React專案上打包速度對比

webpack：

Parceljs和Webpack在React專案上打包速度對比

打包大小

parceljs:

Parceljs和Webpack在React專案上打包速度對比

webpack:

Parceljs和Webpack在React專案上打包速度對比

從對比結果可以看出，Parceljs在構建速度上確實比webpack要快很多,而在打包出來的大小上面，webpack打出來的包似乎要比parceljs打出來的包更小。。如果發現上面的內容有什麼不對的地方，請指出，謝謝～

相關文章