TreeShaking with RxJS 7.x and WebPack 5

Question

I would like to treeshake rxjs in my TypeScript application that is bundled via WebPack:

rxjs@7.5.7 webpack@5.74.0

According to https://rxjs.dev/guide/installation I would have to use the ES2015 exports of rxjs, but I cannot find out how to do that.

Are you aware of an example or a link to some documentation?

My current webpack config is:

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  devtool: 'source-map',
  target: 'node16',
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

This config has successfully tree shaken the rxjs@6 version (which has the module entry point) but it fails to tree shake rxjs@7 and uses the full CJS version instead.

Thanks for any pointers!

Hi Christian, I am unfortunately not able to map this generic description to a concrete webpack config that would successfully tree shake an rxjs application. Do you haven a working example that you could share — Carsten, Oct 30 '22 at 20:46

score 0 · Answer 1 · answered Dec 06 '22 at 09:46

Looks like this is a viable approach:

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  devtool: 'source-map',
  target: 'node18.12',
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
    conditionNames: ['es2015', 'import'],
    mainFields: ['es2015', 'module', 'main'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

TreeShaking with RxJS 7.x and WebPack 5

1 Answers1