Large Bundle Size Differences between Webpack and Vite for Firebase JS SDK

[dwyfrequency]

Hi Team,

A user raised firebase/firebase-js-sdk#7063 to discuss large bundle sizes when using the Firebase JS SDK. I compared the bundle sizes between webpack and vite with the code provided by the user and noticed vite's bundle was consistently larger than webpacks when using the default configuration. Is there anything the JS Firebase SDK needs to change to be optimized for vite or do we just need to advice users on the proper vite configuration? Based on what you are seeing, is there a configuration we should point users to?

Abbreviated package.json
//Webpack 

"devDependencies": {
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1"
  },

// Vite
"devDependencies": {
    "vite": "^4.1.4"
  },

import firebaseConfig from '../hidden/firebaseConfig'; // need to add this file 
import { getMessaging, getToken } from 'firebase/messaging';
import { initializeApp } from 'firebase/app';

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const messaging = getMessaging(app);

async function component() {
  const element = document.createElement('div');

  element.innerHTML = JSON.stringify(messaging);

  return element;
}

const getFirebaseToken = async () => {
  try {
    const currentToken = await getToken(messaging, {
      vapidKey: 'FIREBASE_VAPID_KEY',
    });
    if (!currentToken) {
      console.log(
        "This shouldn't happen - No registration token available. Request permission to generate one."
      );
    } else {
      // we have a token, save it
      console.log('firebase', currentToken);
      // this function does not exist in the code the user sent us but it still seems to build for the experiment
      bring('post', '/home/register_push', {
        token: currentToken,
        type: 'fireweb',
      });
    }
  } catch (e) {
    console.log('An error occurred while retrieving token. ', e);
  }
};

document.body.appendChild(component());
document.body.appendChild(getFirebaseToken());

// Webpack 
// yarn build
// $ ls -lh dist/main.js
// -rw-r--r--  1 .. .. 42K Feb 27 17:27 dist/main.js
// gzip -k dist/main.js;  ls -lh dist/main.js.gz
// -rw-r--r--  1 ..  ..    13K Feb 27 17:27 dist/main.js.gz

$ vite build
vite v4.1.4 building for production...
✓ 14 modules transformed.
dist/index.html                    0.40 kB
dist/assets/favicon-17e50649.svg   1.52 kB
dist/assets/index-2119a3e3.js     81.16 kB │ gzip: 15.42 kB

This did not appear to be limited to the messaging package as I had previously done an experiment between the different versions and tools.
<style type="text/css"></style>

APP,ANALYTICS	V9	37K	webpack	https://github.com/dwyfrequency/webpackV9Analytics
APP,ANALYTICS	V8	54K	webpack	https://github.com/dwyfrequency/webpackV8Analytics
APP,ANALYTICS	V8-ESM2017	39K	webpack	https://github.com/dwyfrequency/webpackV8AnalyticsEsm17
APP,ANALYTICS	V8	82K	vite	https://github.com/dwyfrequency/viteV8Analytics
APP,FIRESTORE	V9	187K	webpack	https://github.com/dwyfrequency/webpackV9
APP,FIRESTORE	V8	353K	webpack	https://github.com/dwyfrequency/webpackV8
APP,FIRESTORE	V8-ESM2017	283K	webpack	https://github.com/dwyfrequency/webpackV8Esm17Firestore
APP,FIRESTORE	V8	399K	vite	https://github.com/dwyfrequency/vite-bundle-projectV8
APP,FIRESTORE	V9	249.88K	vite	https://github.com/dwyfrequency/vite-bundle-projectV9
APP,FIRESTORE-LITE	V9	52K	webpack	https://github.com/dwyfrequency/webpackV9FirestoreLite
APP,PERFORMANCE	V9	43K	webpack	https://github.com/dwyfrequency/webpackV9Performance
APP,PERFORMANCE	V8	56K	webpack	https://github.com/dwyfrequency/webpackV8Performance
APP,PERFORMANCE	V8-ESM2017	43K	webpack	https://github.com/dwyfrequency/webpackV8Performance
APP,PERFORMANCE	V8	90K	vite	https://github.com/dwyfrequency/viteV8Performance
APP,REMOTE-CONFIG	V9	37K -> 39K	webpack	https://github.com/dwyfrequency/webpackV9RemoteConfig
APP,REMOTE-CONFIG	V8	55K	webpack	https://github.com/dwyfrequency/webpackV8RemoteConfig
APP,REMOTE-CONFIG	V8-ESM2017	40K	webpack	https://github.com/dwyfrequency/webpackV8RemoteConfigEsm17
APP,REMOTE-CONFIG	V8	85K	vite	https://github.com/dwyfrequency/viteV8RemoteConfig
APP,MESSAGING	V8	95K	vite	https://github.com/dwyfrequency/viteV8Messaging
APP,MESSAGING	V9	81K	vite	https://github.com/dwyfrequency/viteV9Messaging

[sapsucks]

Don't know about Webpack (been a while since I used it...), but Vite does not drop legal comments from the bundle by default.
Try adding the following to Vite's defineConfig object (inside vite.config.js):

export default defineConfig({ ..., esbuild: { legalComments: 'external' } })

There are few options for the legalComments field - documentation available at https://esbuild.github.io/api/#legal-comments

[devrizwanali]

I've upgrade from webpacker to vite, there is a huge difference in the final build with webpacker and vite, it was 200kb with webpakcer now it;s almost 700kb

[patak-dev]

Would you check using vite@5.1.0-beta.3? It includes #15665 and may affect your result. If not, it would be good to create a minimal reproduction and an issue in the repo

[devrizwanali]

There is no difference by using the latest version vite@5.1.0-beta.3, I've managed to reduce some size by lazy loading vue components still, the size is 450kb. External libraries like VueRouter, and VueI18n adding more size in the final bundle.

Do you have any idea how to effectively use these external libraries with vite configuration?

thanks :)

[XiSenao]

I'm also curious about what happened. If you can create an issue and provide a minimal reproduction repository, it might be helpful for you. @devrizwanali

[devrizwanali]

Thanks @XiSenao for the quick response unfortunately, I can't share the code. it's a large ROR app with VueJs FE.

[patak-dev]

You could try to replicate the issue outside of your app to create a minimal repro.