Simple firebase messaging still 158kb after tree shaking?

[inspire22]

Adding this to my project more than doubles my javascript size. I'd like to lazy-load if it it's going to be this big, but it feels like something else is going wrong maybe.

Looking at this https://firebase.blog/posts/2021/08/the-new-firebase-js-sdk-now-ga specifically the "a small firebase" image shows that the app should be 5.21kb and the messaging 12k - waaaay off from what I'm seeing.

I'm using vite with rollup. I believe it's tree-shaking, but it's hard to tell.

Looking at the visualizer i'm using sounds like the reported sizes aren't exactly accurate (my overall js file size actually increases only 240kb -> 320kb), but it still seems far larger than expected (80kb vs 17kb). btd/rollup-plugin-visualizer#96

Any help welcome :) I'll look into dynamic module imports to only load when I want to prompt the user for web push notification permission, but that ends up download even more (the full library since it can't be tree-shaken).

import { initializeApp } from "firebase/app";
import { getMessaging, getToken } from "firebase/messaging";
const getFirebaseToken = async () => {
  console.log( "getFirebaseToken" )

  const app = initializeApp( firebaseConfig );
  const messaging = getMessaging();

  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 )
      bring( 'post', "/home/register_push", { token: currentToken, type: 'fireweb' } )
      }
    }
  } catch ( e ) {
    console.log( "An error occurred while retrieving token. ", e );
  }
};

[dwyfrequency]

Interesting, when using vite my bundle size is larger than the same app with webpack. I would be surprised if vite does not tree shake by default but maybe a config file is necessary.

//Webpack 

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

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

import firebaseConfig from '../hidden/firebaseConfig';
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);
      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

[inspire22]

Thanks for taking a look!

Wow, half the size even. The package.json at the top must be abbreviated and there's "firebase": "^9.17.1" in there right for it to work?

Supposedly vite auto-tree-shakes but I'm pretty new to it and not an expert.

Do you have any idea how to check/test if something is being tree=shaken?

[dwyfrequency]

The V9 bundle is much smaller with both webpack and vite. You can see this if you make similar projects and update the package.json for respective versions. At the end of the day, webpack, vite, and esbuild will all vary in terms of resulting size

Vite example with Firebase versions
V8: dist/assets/index-67bf2f8c.js 94.69 kB │ gzip: 19.02 kB
V9: dist/assets/index-2119a3e3.js 81.16 kB │ gzip: 15.42 kB

V8

import firebaseConfig from './hidden/firebaseConfig';
import 'firebase/messaging';

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();

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

  element.innerHTML = JSON.stringify(messaging);

  return element;
}

const getFirebaseToken = async () => {
  try {
    const currentToken = await messaging.getToken({
      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);
      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());

/**
 ~/Developer/vite/messaging-bundle-7063-v8 -  (main) $ yarn build
yarn run v1.22.19
$ vite build
vite v4.1.4 building for production...
✓ 13 modules transformed.
dist/index.html                    0.40 kB
dist/assets/favicon-17e50649.svg   1.52 kB
dist/assets/index-67bf2f8c.js     94.69 kB │ gzip: 19.02 kB
✨  Done in 0.86s.
 */

import firebaseConfig from './hidden/firebaseConfig';
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);
      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());

/**
 ~/Developer/vite/messaging-bunlde-7063 -  (main) $ yarn build
yarn run v1.22.19
$ 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
✨  Done in 0.44s.
 */

[inspire22]

The difference between vite & webpack is a lot larger than the v8 to v9 difference though (40k -> 80k) vs (80k -> 91k). There's gotta be something going wrong with vite here.

[dwyfrequency]

I opened up a discussion vitejs/vite#12310 in the vite repo. Hopefully, we'll get a response