Whether to support exporting esmodule format that can run in browsers

[lanten]

Hi,

I want to use ESM in my browser

How can I get <script type="module" /> (like vite), instead of webpackChunk？

[chenjiahan]

This is possible, but first we want to clarify the advantages of ESM over webpackChunks.

The webpack runtime is good at organising the loading and execution of chunks, which is crucial for web applications. I’m not sure that ESM is capable of fully equivalent behavior.

[lanten]

@chenjiahan Thanks for reply

I believe ESM offers greater flexibility in resource referencing.

This is a simple demo [code].

In this demo, I can directly load the required resources through import('./xxx'), which is easy to use and beneficial for building atomic projects (micro-frontends). I only need to find the file index in manifest.json or specify the final output file name during the build process.

Moreover, ESM supports static analysis, so I can optimize the code during the build, such as tree shaking, to remove unnecessary code from the bundle, which is crucial for performance improvement.

I have substantial experience with this approach in production projects, and the performance results have been highly satisfactory.

With webpackChunks, I might need to reference some network resources I don't need, import, or even implement a __webpack_require__ function myself because the resource caller may not have this webpack-injected function. Additionally, I would have to find the corresponding chunk hash, which is not an easy task. Overall, the flexibility is lower, and the implementation is more cumbersome.

I’m just starting to research and learn about rsbuild, and I haven’t used webpack in a while, so some of my views might be biased. If there’s anything incorrect, please let me know.

为了更精准地表达，附上中文版本：

我认为 ESM 有更高的资源引用灵活性
这是一个 简单demo[code]
在这个demo中我可以直接通过 import('./xxx') 加载我需要的资源，这易于使用且有利于原子化项目(微前端)的构建，我只需要在manifest.json中找到文件索引或在打包的时候明确最终产出的文件名即可。
此外，ESM 支持静态分析，因此我可以在构建过程中进行优化，比如树摇(tree shaking)，减少不必要的代码打包，这对于性能提升至关重要。
这个方案我在生产项目中有着充分的实践，其卓越的性能表现令人满意。
反观 webpackChunks，我可能需要引用一些我不需要的网络资源，导入或自己实现一个 __webpack_require__因为资源调用方可能不存在这个webpack注入的函数，此外我还需要找到对应模块的 chunk hash，这应该不是一件容易的事情。整体来说灵活性不高且实现起来更加繁琐。
我刚开始调研并学习 rsbuild，webpack 也许久没有使用，一些看法可能会比较片面，如果有不对的地方，请告诉我。

[chenjiahan]

Tree shaking only requires the source code to be ESM, it doesn't require the build output to be ESM. Using ESM output will not result in better tree shaking.

For micro-frontends, I would recommend using Module Federation, as it's much more powerful than native ESM: https://rsbuild.dev/guide/advanced/module-federation

[lanten]

Ok, I will try to use Module Federation

[lanten]

Tree shaking only requires the source code to be ESM, it doesn't require the build output to be ESM. Using ESM output will not result in better tree shaking.

For micro-frontends, I would recommend using Module Federation, as it's much more powerful than native ESM: https://rsbuild.dev/guide/advanced/module-federation

Thank you for the correction. Module Federation is indeed powerful. I’ve discovered that it introduced an experimental feature experiments.outputModule: true, which allows the output to be used as a standard ESM, and works fine in rsbuild, which aligns with my expectations.

The reason I reject webpackChunks is that it forces the caller of the module to also be based on Webpack, or to manually implement webpack_require. I don't like this kind of 'kidnapping' because I believe that modular exports should be usable seamlessly in a native JS environment. outputModule removes my concerns.

[lanten]

Config:

export default defineConfig({
  // ...

  tools: {
    rspack: {
      experiments: {
        outputModule: true,
      },
    },
  },

  moduleFederation: {
    options: {
      name: 'remote',
      exposes: {
        './Button': './src/Button',
      },
      filename: 'remoteEntry.js',

      library: {
        type: 'module',
      },

      // ...
    },
  },
})

Use:

import('http://localhost:3002/remoteEntry.js').then(async (res) => {
  const moduleButton = (await res.get('./Button'))()
  console.log(moduleButton) // __esModule
})