Parcel v1 build hugely smaller size than Parcel v2

[shamiam1980]

We have been using Parcel v1 for our React project until we decided to upgrade to v2 hoping for a better bundle size, but what happened was the opposite. Parcel v2 produces a larger css and js filesize. Detailed report shows that Parcel v2 produces a larger size for the main packages we use (Preact JS / bulma CSS), as well as the pure React component files.

PARCEL V1

Parcel v1 package.json dependencies:

"dependencies": {
    "bulma": "^0.9.0",
    "chartist": "^0.11.4",
    "chartist-plugin-legend": "^0.6.2",
    "chartist-plugin-tooltips-updated": "^0.1.4",
    "classnames": "^2.2.6",
    "history": "^5.3.0",
    "preact": "^10.4.7",
    "preact-router": "^3.2.1"
},
"devDependencies": {
    "@mockoon/cli": "^2.0.0",
    "parcel-bundler": "^1.12.4",
    "parcel-plugin-nuke-dist": "^1.0.1",
    "parcel-plugin-purgecss": "^3.0.0",
    "prettier-standard": "^16.4.1",
    "sass": "^1.54.4",
    "sass-loader": "^13.0.2",
    "svgo": "^1.3.2",
    "version-select": "^1.0.13"
}

Parcel v1 build command:

npx parcel build src/index.html --no-source-maps --experimental-scope-hoisting --detailed-report 16

Parcel v1 parcel build detailed report (Look at chartist.js, bulma.sass and React component Meter.preact.js):

---

PARCEL V2

Parcel v2 package.json dependencies:

  "dependencies": {
    "bulma": "^0.9.0",
    "chartist": "^0.11.4",
    "chartist-plugin-legend": "^0.6.2",
    "chartist-plugin-tooltips-updated": "^0.1.4",
    "classnames": "^2.2.6",
    "history": "^5.3.0",
    "preact": "^10.4.7",
    "preact-router": "^3.2.1"
  },
  "devDependencies": {
    "@fullhuman/postcss-purgecss": "^5.0.0",
    "@mockoon/cli": "^2.0.0",
    "@parcel/transformer-sass": "^2.9.3",
    "3.0.0": "^3.0.0",
    "parcel": "^2.9.3",
    "parcel-plugin-nuke-dist": "^1.0.1",
    "prettier-standard": "^16.4.1",
    "purgecss": "^5.0.0",
    "sass": "^1.54.4",
    "sass-loader": "^13.0.2",
    "svgo": "^1.3.2",
    "version-select": "^1.0.13"
  }

Parcel v2 build command:

npx parcel build src/index.html --no-source-maps --detailed-report 16

Parcel v2 parcel build detailed report (Look at chartist.js, bulma.sass and React component Meter.preact.js):

---

NOTES:

Parcel v1 Meter.preact.js external imports:

import { Fragment, h } from "preact";
import { useState, useEffect } from "preact/hooks";
import classNames from "classnames";

Gzip:

We use gzip after parcel bundling for extra compression. I noted that the Parcel v1 final output is 99 kB, vs an output of 107 kB for v2, which is somewhat close. Does this refer to anything?

PurgeCSS:

The big change is that purgecss was working flawlessly with Parcel V1 as a built-in plugin, but needed some setup and config for v2. Maybe I couldn't get that to work with v2 yet, but does this cause a bad compression for everything? Or is it a tree-shaking issue with Preact - for e.g.? I feel like there's a missing key that may solve everything.

Any help would be much appreciated!

[mischnic]

The detailed report in Parcel 2 is often not very accurate, especially with --no-source-maps, because it uses sourcemaps to determine where code in the output bundle came from.

As far as I can tell, the Parcel 2 output is 238kb of JS vs Parcel 1's 300kb of JS. So actually Parcel 2 is better for JS? But worse for CSS somehow?

[shamiam1980]

Thanks for the super quick reply!
How did I miss that! Away from the detailed sizes, the final sum of Parcel 2 JS file is really smaller!
So it might be really a purgecss thing, to get the library to work with Parcel 2, removing unused CSS during build.

There has been a discussion about this before:
#1276

I just tried this solution with no luck:
#1276 (comment)

But now - if you agree with me - I can do some extensive research getting the purgecss library to work with Parcel 2

[mischnic]

That's great to hear 👍

I just tried this solution with no luck:

That should be working.

[shamiam1980]

Thanks so much, I will recheck.