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

相關文章