In the last few days, the front circles are probably flooded with Parceljs. The main features of Parceljs are:

  • Speed to build
  • Zero configuration

To learn more about Parceljs, click here

The official Parcejs website gives the results of the build speed comparison with other packaging tools, but does not give the test project address, so I spent some time on React to do the following test.

The environment

Node version: V9.2.1 NPM version :5.6.0Copy the code

The project address

parceljs-react

webpack-react

Both projects are very small, with only four components in total. The React route is imported.

The configuration file

Parceljs is not configured

The configuration of Webpack is as follows:

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'}}}]Copy the code

Comparing the results

Build speed

Parceljs:

Webpack:

Package size

parceljs:

webpack:

From the comparison results, we can see that Parceljs does build much faster than WebPack, and in terms of the size of the package, the package produced by Webpack seems to be smaller than Parceljs. If you find anything wrong with the above content, please point out, thank you ~