rspack support exploration #37732
rspack support exploration #37732
Conversation
Co-authored-by: LekoArts <lekoarts@gmail.com>
gatsbot
bot
added
the
status: triage needed
pieh
added
topic: webpack/babel
| // actions.setWebpackConfig({ | ||
| // module: { | ||
| // rules: [ | ||
| // { | ||
| // test: /\.tsx?$/, | ||
| // use: ({ resourceQuery, issuer }) => [ | ||
| // loaders.js({ | ||
| // isPageTemplate: /async-requires/.test(issuer), | ||
| // resourceQuery, | ||
| // }), | ||
| // ], | ||
| // }, | ||
| // ], | ||
| // }, | ||
| // }) |
There was a problem hiding this comment.
module.rules[].use can't be a callback
| `$virtual/async-requires`, | ||
| `./.cache/_this_is_virtual_fs_path_/$virtual/async-requires.js`, |
There was a problem hiding this comment.
module.hot.accept seems to not handle alias ($virtual is an alias) and require actual module path
| .thisIsDummyRuleSoThatRspackHaveSomeInitialCSSGuaranted { | ||
| z-index: inherit; | ||
| } |
There was a problem hiding this comment.
without actual css content we were hitting HMR problem (404 on css hot update refetch)
| @@ -0,0 +1 @@ | |||
| globalThis.__resourceQuery = `?hot=true` | |||
There was a problem hiding this comment.
without this @rspack/dev-client was failing to compile on https://github.com/web-infra-dev/rspack/blob/b9779464b7c5f6ad067ecc407e8548b9b31179dd/packages/rspack-dev-client/src/index.ts#L46
| @@ -28,9 +28,9 @@ async function recompileDevBundle({ | |||
| resolve(stats) | |||
| } | |||
| emitter.on(`COMPILATION_DONE`, finish) | |||
| webpackWatching.resume() | |||
| // webpackWatching.resume() | |||
There was a problem hiding this comment.
resume / suspend doesn't seem available
| childAssets[chunkGroup.name][rel] = childFiles | ||
| } | ||
| debugger | ||
| // for (const chunkGroup of stats.compilation.chunkGroups) { |
There was a problem hiding this comment.
stats.compilation.chunkGroups not available
| // include: (modulePath: string): boolean => { | ||
| // // when it's not coming from node_modules we treat it as a source file. | ||
| // if (!vendorRegex.test(modulePath)) { | ||
| // return true | ||
| // } | ||
|
|
||
| // // If the module uses Gatsby as a dependency | ||
| // // we want to treat it as src so we can extract queries | ||
| // return modulesThatUseGatsby.some(module => | ||
| // modulePath.includes(module.path) | ||
| // ) | ||
| // }, |
There was a problem hiding this comment.
module.rules[].include can't be a callback
| // modulePath.includes(module.path) | ||
| // ) | ||
| // }, | ||
| type: opts?.isRspack ? `jsx` : `javascript/auto`, |
There was a problem hiding this comment.
jsx type is required to inject Fast Refresh HMR handlers
| // ({ resourceQuery, issuer }): Array<RuleSetUseItem> => | ||
| use: [ |
There was a problem hiding this comment.
module.rules[].use can't be a callback
| // use, | ||
| type: `css`, |
There was a problem hiding this comment.
Use builtin css support instead of css-loader, mini-css-extract-plugin etc
| plugins.define = someObject => { | ||
| rsPackDefine = { ...rsPackDefine, ...someObject } | ||
| return undefined | ||
| } |
There was a problem hiding this comment.
Using builtins.define instead of DefinePlugin ( https://www.rspack.dev/config/builtins.html#builtinsdefine / https://www.rspack.dev/guide/plugin-compat.html )
| @@ -210,7 +223,7 @@ module.exports = async ( | |||
|
|
|||
| function getPlugins() { | |||
| let configPlugins = [ | |||
| plugins.moment(), | |||
| // plugins.moment(), | |||
There was a problem hiding this comment.
IgnorePlugin used by plugins.moment() not supported
| // configPlugins.push( | ||
| // plugins.extractText({ | ||
| // filename: `[name].css`, | ||
| // chunkFilename: `[id].css`, | ||
| // }) | ||
| // ) |
There was a problem hiding this comment.
Use builtin css support instead of mini-css-extract-plugin
| // descriptionData: { | ||
| // type: `module`, | ||
| // }, |
There was a problem hiding this comment.
descriptionData fails config validation
| @@ -491,6 +504,7 @@ module.exports = async ( | |||
| `@gatsbyjs/webpack-hot-middleware` | |||
| ), | |||
| $virtual: getAbsolutePathForVirtualModule(`$virtual`), | |||
| webpack: getPackageRoot(`webpack`), | |||
There was a problem hiding this comment.
Dedupe webpack package - gatsby has webpack dependency and now @rspack/dev-client also has webpack dependency. If package manager chose to install 2 instances, that breaks HMR. So we use alias here to "dedupe" it in compiled bundle
| // splitChunks: { | ||
| // chunks: `all`, | ||
| // cacheGroups: { | ||
| // default: false, | ||
| // defaultVendors: false, | ||
| // framework: { | ||
| // chunks: `all`, | ||
| // name: `framework`, | ||
| // test: FRAMEWORK_BUNDLES_REGEX, | ||
| // priority: 40, | ||
| // // Don't let webpack eliminate this chunk (prevents this chunk from becoming a part of the commons chunk) | ||
| // enforce: true, | ||
| // }, | ||
| // // Bundle all css & lazy css into one stylesheet to make sure lazy components do not break | ||
| // // TODO make an exception for css-modules | ||
| // styles: { | ||
| // test(module) { | ||
| // return isCssModule(module) | ||
| // }, | ||
| // name: `commons`, | ||
| // priority: 40, | ||
| // enforce: true, | ||
| // }, | ||
| // }, |
There was a problem hiding this comment.
splitChunks need to be rethinkied. No function callbacks allowed here (test, name, etc)
| @@ -737,21 +752,21 @@ module.exports = async ( | |||
| }, | |||
| // TODO fix our partial hydration manifest | |||
| mangleExports: !isPartialHydrationEnabled, | |||
| splitChunks, | |||
| // splitChunks, | |||
There was a problem hiding this comment.
splitChunks need to be rethinkied. No function callbacks allowed here (test, name, etc)
| } | ||
| } | ||
| ) | ||
| // compiler.hooks.finishMake.tapPromise( |
There was a problem hiding this comment.
compiler.hooks.finishMake hook not available
| // ) | ||
| // for (const entry of compilation.entries.values()) { | ||
| // for (const dependency of entry.dependencies) { | ||
| // const mod = compilation.moduleGraph.getModule(dependency) |
There was a problem hiding this comment.
compilation.moduleGraph not available in JavaScript. It is used internally in Rust land, but not exposed to JS
|
From the docs:
|
| // const incomingConnections = | ||
| // compilation.moduleGraph.getIncomingConnections(module) | ||
| // for (const connection of incomingConnections) { | ||
| // if (connection.originModule instanceof NormalModule) { | ||
| // traverseModule(connection.originModule, config, visitedModules) | ||
| // } | ||
| // } | ||
| // } |
There was a problem hiding this comment.
maybe we can figure out alternative way to "backtrack" imports that is not relying on moduleGraph.getIncomingConnections?
Or if we zoom out of this implementation detail, what could be other way to determine if module A is used/needed/imported by module B?
There is additional consideration to make here:
For React Server Components support (experimental, not on by default) we have to do this moduleGraph traversal BEFORE we mess with module graph to make React Server Components work by removing non-client components and add entries for client components, so that's something to keep in mind that we likely can't just use final Stats object for that (while it probably be fine for Rspack, as it would be ok to not support Server Components there yet, this would introduce separate code path / implementation that adds too much maintainance burden to reallistically support and possibly introduce behavior changes between the 2 implemantions)
Hello!
Nearly a year ago we posted the public RFC: New Bundler in Gatsby to communicate that we're looking into alternatives to webpack (Gatsby's current bundler). After a lot of research we decided against a migration at that time and further optimized our usage of webpack since then.
As you can read in our conclusion one of the major reasons to postpone the migration were the breaking changes that would have occurred. Gatsby always used webpack so Gatsby's plugin ecosystem heavily relies on webpack APIs, meaning: If we'd change those APIs due to e.g. a completely different bundler, a lot of plugins & sites wouldn't be compatible anymore.
Thus we were very happy to be approached by Valor Software together with the Rspack team from ByteDance. Rspack boasts a high level of compatibility with webpack, directly addressing our major problem for switching bundlers. Of course, there won't be a 1:1 compatibility but our experiment so far is promising.
Important: This pull request is a proof of concept.
We're still exploring Rspack inside Gatsby and we aren't making any definitive decisions yet. However, we're happy with the results so far and want to continue exploring Rspack for Gatsby.
A special thanks to the Rspack team as they have been great to work with and helped a lot with our experiment!
Learn more about Rspack:
Technical section
We mentioned high level of compatibility, but not 1:1 level compatibility. There are certain configuration and API features that are not available. Because of that not all Gatsby features work just yet, notably Static Queries and Slices are not supported currently. More specific information will be mentioned in inline comments.
We still are using
babelin this setup due to some Gatsby internal babel plugins and will continue with this approach as we work first on bundling concerns. We plan to exploreswcafter that.Our chunk splitting configuration is currently disabled and Rspack default is being used right now.
In current state of this Pull Request we only use Rspack for browser bundles. Development server does support Hot Module Replacement and Fast Refresh. HTML Renderer, API Functions and Rendering Engines continue to use webpack for now.
Performance
It's too early to compare yet, we don't have feature parity yet, so we can only refer to general Rspack benchmarks
Try it out
If you are curious about this, you can check out
gatsby@alpha-rspack