Tree Shaking not working

[lzs246]

System Info

System:
OS: macOS 13.0
CPU: (10) arm64 Apple M1 Pro
Memory: 1.81 GB / 32.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.18.0 - ~/.nvm/versions/node/v16.18.0/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v16.18.0/bin/yarn
npm: 8.19.2 - ~/.nvm/versions/node/v16.18.0/bin/npm
pnpm: 8.6.0 - ~/.nvm/versions/node/v16.18.0/bin/pnpm
Browsers:
Chrome: 114.0.5735.198
Safari: 16.1
npmPackages:
@rspack/cli: ^0.2.7 => 0.2.7

Details

Rspack

source code

// main.ts
import { isDev } from './testConfig';

console.log(isDev, '--isDev');

if (isDev) {
  console.log('p111');
} else {
  console.log('p222');
}

if (true) {
  console.log('b111');
} else {
  console.log('b222');
}

// testConfig.ts
export const isDev = true;

// webpack.config.js
const config = defineConfig({
  mode: 'production',
  devtool: false,

  entry: path.join(mainDirPath, 'main.ts'),

  output: {
    path: path.join(mainDirPath, '../dist'),
    filename: '[name].js',
  },
});

module.exports = config;

dist code

var e = {
      821: function (e, o, t) {
        'use strict';
        t.r(o);
        var r = t('354');
        console.log(r.isDev, '--isDev'),
         // Tree shanking not working
          r.isDev ? console.log('p111') : console.log('p222'),
          console.log('b111');
      },
      354: function (e, o, t) {
        'use strict';
        t.r(o),
          t.d(o, {
            isDev: function () {
              return r;
            },
          });
        let r = !0;
      },
    }

Webpack5

The same code Tree Shanking can work properly
webpack: 5.75.0
source code

// index.js
import { isDev } from './testConfig';

console.log(isDev, '--isDev');

if (isDev) {
  console.log('p111');
} else {
  console.log('p222');
}

if (true) {
  console.log('b111');
} else {
  console.log('b222');
}

// testConfig.js
export const isDev = true;

// webpack.config.js
const path = require('path');

module.exports = {
  entry: path.join(__dirname, 'src'),
  output: {
    path: path.join(__dirname, 'dist'),
  },
  devtool: false,
};

dist code

(() => {
  'use strict';
  console.log(!0, '--isDev'), console.log('p111'), console.log('b111');
})();

Reproduce link

No response

Reproduce Steps

rspack build -c ./webpack.config.js

[IWANABETHATGUY]

I have tested with webpack, here is the result of webpack:

(() => {
	"use strict";
	var o,
		e = {
			"./a/lib.js": (o, e, r) => {
				r.d(e, { isDev: () => s });
				const s = !0;
			},
		},
		r = {};
	function s(o) {
		var t = r[o];
		if (void 0 !== t) return t.exports;
		var l = (r[o] = { exports: {} });
		return e[o](l, l.exports, s), l.exports;
	}
	(s.d = (o, e) => {
		for (var r in e)
			s.o(e, r) &&
				!s.o(o, r) &&
				Object.defineProperty(o, r, { enumerable: !0, get: e[r] });
	}),
		(s.o = (o, e) => Object.prototype.hasOwnProperty.call(o, e)),
		(o = s("./a/lib.js")),
		console.log(o.isDev, "--isDev"),
		o.isDev ? console.log("p111") : console.log("p222"),
		console.log("b111");
})();

(I enabled the minimize but format the output by hand for better demonstration.)
We have the same behavior as webpack, so maybe this is not a bug, at least for now. @hardfist

[lzs246]

@IWANABETHATGUY Why is the build result different from my webpack build? Is it the webpack version

[IWANABETHATGUY]

Please disable the optimization. concatenateModules

[lzs246]

@IWANABETHATGUY Yes, In Webpack build, set optimization. concatenateModules=false, can be reproduced. But normal webpack production construction optimization.concatenateModules is true, so the above scenario, in webpack tree shaking can work

[IWANABETHATGUY]

related to #3823, because we don't implement that feature yet.

[lzs246]

thank

[hardfist]

since it's not a bug now, closed it now we will support concatModules in the future