Webpack more than triples original module size

Question

I have my environment set up where I write client-side JS code in TypeScript (to gain the benefits of using TS) and use Webpack to bundle it into my public directory in my Firebase project. I've found that Webpack seems to be adding quite a lot of overhead to my code. Packing up a file that merely only imports the Firestore module ends up with about 300 KiB of code when the original file is <100KiB.

Here is a minimal configuration that still has the same behavior:

index.ts

import 'firebase/firestore';

webpack.config.ts

import { Configuration } from 'webpack';
import path from 'path';

const config: Configuration = {
    mode: 'production',
    entry: path.resolve(__dirname, 'index.ts'),
    module: {
        rules: [
            {
                test: /\.ts?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ],
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/',
        filename: '[name].js',
        chunkFilename: '[chunkhash].js'
      },
    resolve: {
        extensions: [ '.ts', '.js' ],
        modules: ['node_modules'],
    },
    optimization: {
        minimize: true,
    },
}

export default config;

tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitReturns": true,
        "noUnusedLocals": true,
        "outDir": "lib",
        "sourceMap": false,
        "strict": true,
        "target": "es2017",
        "esModuleInterop": true,
    },
    "compileOnSave": true,
}

package.json

{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "firebase": "^8.0.2"
  },
  "devDependencies": {
    "ts-loader": "^8.0.11",
    "ts-node": "^9.0.0",
    "typescript": "^4.0.5",
    "webpack": "^5.4.0",
    "webpack-cli": "^4.2.0"
  }
}

As explained above, the final bundle size is 300+ KiB, when the file that's being imported is <100 KiB. What can I do so that my bundle isn't tripling in size?

Answer 1

Ok so this looks like it's a known issue. It was first mention in this issue in the Firebase JS SDK GitHub (with conversation moving here). It looks like there's a pretty involved workaround here, or I could just use the experimental version of the Firebase JS SDK.