rspack: [Bug Report]: As the input size increases, the difference in build output size between webpack widens.

System Info

System: OS: Linux 5.10 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish) CPU: (6) x64 11th Gen Intel® Core™ i5-1135G7 @ 2.40GHz Memory: 7.97 GB / 11.70 GB Container: Yes Shell: 5.8.1 - /usr/bin/zsh Binaries: Node: 16.19.1 - ~/.nvm/versions/node/v16.19.1/bin/node Yarn: 1.22.19 - ~/.nvm/versions/node/v16.19.1/bin/yarn npm: 8.19.3 - ~/.nvm/versions/node/v16.19.1/bin/npm npmPackages: @rspack/cli: ^0.1.1 => 0.1.1 @rspack/plugin-minify: ^0.1.1 => 0.1.1 webpack: 5.76.2 => 5.76.2

Details

I was trying to bundle on this entry

export * as React from "react";
export * as ReactDOM from "react-dom";
export * as Redux from "redux";
export * as ReactRedux from "react-redux";
export * as ReactRouterDOM from "react-router-dom";
export * as ReactRouter from "react-router";
export * as classnames from "classnames";
export * as ReactDnd from "react-dnd";
export * as ReactBeautifulDnd from "react-beautiful-dnd";
export * as ReactDraggable from "react-draggable";
export * as ReactDndHtml5Backend from "react-dnd-html5-backend";
export * as ReactRnd from "react-rnd";
export * as Dayjs from "dayjs";
export * as Lodash from "lodash";
export * as Recoil from "recoil";

The output size between webpack and rspack get bigger when I export more from these libs, even they use same minfier plugin, literally, use this same config:

const path = require("path");
const minifyPlugin = require("@rspack/plugin-minify");

module.exports = {
  target: ["web", "es5"],
  externals: {},
  mode: "production",
  entry: {
    vendor: path.join(process.cwd(), "./index.js"),
  },
  output: {
    path: path.join(process.cwd(), "./dist"),
    filename: "[name].js",
    libraryTarget: "umd",
  },
  devtool: false,
  optimization: {
    minimizer: [new minifyPlugin({ minifier: "terser" })],
  },
};

the output size of webpack: 605 KiB the output size of rspack: 650 KiB

almost 10% bigger, and it will continue to increase if we export more libs

I have checked the input and output of terser, for rspack, it call terser with smaller sourcefile, but results bigger, why? is webpack optimized for this scenario?

Reproduce link

https://github.com/suguanYang/rspack-webpack-terser

Reproduce Steps

go clone https://github.com/suguanYang/rspack-webpack-terser run

yarn // npm i

yarn build:webpack

yarn build:rspack

About this issue

  • Original URL
  • State: closed
  • Created a year ago
  • Comments: 17 (1 by maintainers)

Most upvoted comments

Yeah, of course, I will open some issues to track these problem

Oh, I know that, maybe you could try again after we address these bundle optimization issues

sorry for the late reply, I dig a little bit. Here are some reasons:

  1. We don’t implement concatenateModule and mangleExports, these two options would reduce some output size.
  2. We don’t have a custom runtime yet, the format phase is taken over by swc which would introduce some extra code. e.g.
Object.defineProperty(exports, "__esModule", {
    value: true
});