bug: React project bundle size increased significantly since v5.3

[Davidster]

Bug Report

Ionic version:

[ ] 4.x
[x] 5.x

Current behavior:

Thanks for this great framework! It has been extremely useful for my team and I.

I noticed this issue after upgrading my app via yarn upgrade-interactive. Not sure if this was intended or accidental and I have no idea what is causing it, so I'm just going to write this up as a bug report whether or not it is truly a 'bug'. I'm on macOS Catalina v10.15.2 for what it's worth.

When using an ionic react project created through the ionic cli (ionic start myApp blank --type=react), the bundle size is about 250KB larger after gzip in ionic framework v5.3.0+ vs v5.2.3. The following output + screenshot is taken from analyzing the bundle (npx source-map-explorer 'build/static/js/*.js') in the latest version of the framework:

File sizes after gzip:

  343.37 KB (+343.03 KB)  build/static/js/4.cf1f05fb.chunk.js
  30.1 KB (+24.91 KB)     build/static/js/56.897ea27d.chunk.js
  26.22 KB (+23.8 KB)     build/static/js/54.005c7f05.chunk.js
  10.67 KB (-83.55 KB)    build/static/js/10.e8feefcc.chunk.js
  10.03 KB                build/static/js/7.025ed4f5.chunk.js
  7.34 KB (+5.36 KB)      build/static/js/27.454e19a8.chunk.js
  6.69 KB (+5.76 KB)      build/static/js/6.f549a6ee.chunk.js
  5.92 KB (+1.33 KB)      build/static/js/11.59f0a332.chunk.js
  5.8 KB (-783 B)         build/static/js/14.ee35a349.chunk.js
  5.64 KB (+2.29 KB)      build/static/js/48.a7e274b2.chunk.js
  5.19 KB (+2.42 KB)      build/static/js/35.f3e53559.chunk.js
  5.18 KB (+698 B)        build/static/js/29.3dcd9c4f.chunk.js
  5.15 KB (+1.75 KB)      build/static/js/20.4c45e8e3.chunk.js
  4.67 KB (-20.98 KB)     build/static/js/5.6f10f9f0.chunk.js
  ...etc

Expected behavior:

The expected bundle size is smaller, as it was in version 5.2.3:

File sizes after gzip:

  94.22 KB (+83.55 KB)  build/static/js/10.241257b5.chunk.js
  26.22 KB (+21.55 KB)  build/static/js/5.4b2d98ec.chunk.js
  24.98 KB              build/static/js/90.b5fe00fe.chunk.js
  10.66 KB (+8.44 KB)   build/static/js/22.93708fe4.chunk.js
  10.66 KB (+8.21 KB)   build/static/js/21.b29c60e8.chunk.js
  9.95 KB (+5.35 KB)    build/static/js/15.5a07a03d.chunk.js
  9.95 KB (+8.04 KB)    build/static/js/16.70e11df7.chunk.js
  7.34 KB (+6.67 KB)    build/static/js/51.7ff5d180.chunk.js
  7.34 KB (+5.29 KB)    build/static/js/52.5b7b7c73.chunk.js
  6.58 KB (+4.6 KB)     build/static/js/13.31de2534.chunk.js
  6.58 KB (+804 B)      build/static/js/14.df5494ee.chunk.js
  5.92 KB (+4.4 KB)     build/static/js/23.f785e8f2.chunk.js
  5.92 KB (+1.94 KB)    build/static/js/24.bd19e1a6.chunk.js
  5.8 KB (+3.35 KB)     build/static/js/28.bd75ed3e.chunk.js
  5.64 KB               build/static/js/85.3b8fdfe8.chunk.js
  5.64 KB               build/static/js/84.144eec1f.chunk.js
  5.2 KB                build/static/js/66.7fa338d6.chunk.js
  5.2 KB                build/static/js/67.3c194db7.chunk.js
  ...etc

Steps to reproduce:

Latest version (5.3.1 at the time of writing) yields Current behavior result.

ionic start myApp blank --type=react
cd myApp
yarn add source-map-explorer
ionic build
npx source-map-explorer 'build/static/js/*.js'

Then revert to older version by modifying dependencies in package.json, and rebuild + analyze, yields Expected behavior result:

{
  "dependencies": {
    "@ionic/react": "5.2.3", // prev. ^5.0.7
    "@ionic/react-router": "5.2.3", // prev. ^5.0.7
  }
}

rm -rf node_modules/ yarn.lock
yarn install
ionic build
npx source-map-explorer 'build/static/js/*.js'

Other information:

I tried the above steps for the package versions listed on https://www.npmjs.com/package/@ionic/react, searching for the version where the 'bug' was introduced. From the looks of it, it was introduced some time between version 5.3.0-dev.202006121329.e968bd0 and 5.3.0-dev.202006151602.7457fe2 as the issue was only present in the latter of these two subsequent versions.

Ionic info:

5.3.1 ('bad'):

Ionic:

   Ionic CLI       : 6.11.0 (~/.nvm/versions/node/v12.13.1/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 5.3.1

Capacitor:

   Capacitor CLI   : 2.4.0
   @capacitor/core : 2.4.0

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.13.1 (~/.nvm/versions/node/v12.13.1/bin/node)
   npm    : 6.14.5
   OS     : macOS Catalina

5.2.3 ('good'):

Ionic:

   Ionic CLI       : 6.11.0 (~/.nvm/versions/node/v12.13.1/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 5.2.3

Capacitor:

   Capacitor CLI   : 2.4.0
   @capacitor/core : 2.4.0

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.13.1 (~/.nvm/versions/node/v12.13.1/bin/node)
   npm    : 6.14.5
   OS     : macOS Catalina

[elylucas]

@Davidster,

Thanks, taking a look

[Davidster]

@elylucas thanks for the quick fix

[elylucas]

@Davidster Yep, and thanks for the bug! Good find. This will go out in the next release.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.