refactor(core): rewrite Webpack ChunkAssetPlugin with RuntimeModule

.github/workflows/build-perf.yml

@@ -48,7 +48,7 @@ jobs:
  repo-token: ${{ secrets.GITHUB_TOKEN }}
  build-script: build:website:fast
  clean-script: clear:website # see https://github.com/facebook/docusaurus/pull/6838
- pattern: '{website/build/assets/js/main*js,website/build/assets/css/styles*css,website/.docusaurus/globalData.json,website/.docusaurus/registry.js,website/.docusaurus/routes.js,website/.docusaurus/routesChunkNames.json,website/.docusaurus/site-metadata.json,website/.docusaurus/codeTranslations.json,website/.docusaurus/i18n.json,website/.docusaurus/docusaurus.config.mjs,website/build/index.html,website/build/docs.html,website/build/docs/**/*.html,website/build/blog.html,website/build/blog/**/*.html}'
+ pattern: '{website/build/assets/js/main*js,website/build/assets/js/runtime~main*js,website/build/assets/css/styles*css,website/.docusaurus/globalData.json,website/.docusaurus/registry.js,website/.docusaurus/routes.js,website/.docusaurus/routesChunkNames.json,website/.docusaurus/site-metadata.json,website/.docusaurus/codeTranslations.json,website/.docusaurus/i18n.json,website/.docusaurus/docusaurus.config.mjs,website/build/index.html,website/build/docs.html,website/build/docs/**/*.html,website/build/blog.html,website/build/blog/**/*.html}'
  # HTML files: exclude versioned docs pages, tags pages, html redirect files
  exclude: '{website/build/docs/?.?.?/**/*.html,website/build/docs/next/**/*.html,website/build/blog/tags/**/*.html,**/*.html.html}'
  strip-hash: '\.([^;]\w{7})\.'

packages/docusaurus/src/webpack/client.ts

@@ -13,7 +13,7 @@ import {BundleAnalyzerPlugin} from 'webpack-bundle-analyzer';
 import ReactLoadableSSRAddon from 'react-loadable-ssr-addon-v5-slorber';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import {createBaseConfig} from './base';
-import ChunkAssetPlugin from './plugins/ChunkAssetPlugin';
+import GetChunkAssetRuntimePlugin from './plugins/GetChunkAssetRuntimePlugin';
 import CleanWebpackPlugin from './plugins/CleanWebpackPlugin';
 import ForceTerminatePlugin from './plugins/ForceTerminatePlugin';
 import {createStaticDirectoriesCopyPlugin} from './plugins/StaticDirectoriesCopyPlugin';
@@ -52,7 +52,7 @@ async function createBaseClientConfig({
  new webpack.DefinePlugin({
  'process.env.HYDRATE_CLIENT_ENTRY': JSON.stringify(hydrate),
  }),
- new ChunkAssetPlugin(),
+ new GetChunkAssetRuntimePlugin(),
  // Show compilation progress bar and build time.
  new WebpackBar({
  name: 'Client',

packages/docusaurus/src/webpack/plugins/GetChunkAssetRuntimePlugin.ts

@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import webpack, {type Compiler} from 'webpack';
+
+const PluginName = 'Docusaurus-ChunkAssetPlugin';
+
+// This generates a __webpack_require__.gca fn to the Webpack runtime chunk
+// It is called in docusaurus.ts for chunk prefetching
+function generateGetChunkAssetRuntimeCode(chunk: webpack.Chunk): string {
+ const chunkIdToName = chunk.getChunkMaps(false).name;
+ const chunkNameToId = Object.fromEntries(
+ Object.entries(chunkIdToName).map(([chunkId, chunkName]) => [
+ chunkName,
+ chunkId,
+ ]),
+ );
+
+ // Custom Docusaurus runtime function to convert from chunkId to chunk url
+ const DocusaurusGetChunkAsset = '__webpack_require__.gca';
+
+ const {
+ // publicPath = __webpack_require__.p
+ // Example: "/" or "/baseUrl/"
+ // https://github.com/webpack/webpack/blob/v5.94.0/lib/runtime/PublicPathRuntimeModule.js
+ publicPath,
+
+ // getChunkScriptFilename = __webpack_require__.u
+ // Example: getChunkScriptFilename("814f3328") = "814f3328.03fcc178.js"
+ // https://github.com/webpack/webpack/blob/v5.94.0/lib/runtime/GetChunkFilenameRuntimeModule.js
+ getChunkScriptFilename,
+ } = webpack.RuntimeGlobals;
+
+ const code = `// Docusaurus function to get chunk asset
+${DocusaurusGetChunkAsset} = function(chunkId) { chunkId = ${JSON.stringify(
+ chunkNameToId,
+ )}[chunkId]||chunkId; return ${publicPath} + ${getChunkScriptFilename}(chunkId); };`;
+
+ return webpack.Template.asString(code);
+}
+
+/*
+ Note: we previously used "mainTemplate.hooks.requireExtensions.tap"
+ But it will be removed in Webpack 6 and is not supported by Rspack
+ So instead we use equivalent code inspired by:
+ - https://github.com/webpack/webpack/blob/v5.94.0/lib/RuntimePlugin.js#L462
+ - https://github.com/webpack/webpack/blob/v5.94.0/lib/runtime/CompatRuntimeModule.js
+ */
+export default class GetChunkAssetRuntimePlugin {
+ apply(compiler: Compiler): void {
+ compiler.hooks.thisCompilation.tap(PluginName, (compilation) => {
+ compilation.hooks.additionalTreeRuntimeRequirements.tap(
+ PluginName,
+ (chunk) => {
+ compilation.addRuntimeModule(chunk, new ChunkAssetRuntimeModule());
+ },
+ );
+ });
+ }
+}
+
+// Inspired by https://github.com/webpack/webpack/blob/v5.94.0/lib/runtime/CompatRuntimeModule.js
+class ChunkAssetRuntimeModule extends webpack.RuntimeModule {
+ constructor() {
+ super('compat', webpack.RuntimeModule.STAGE_ATTACH);
+ this.fullHash = true;
+ }
+
+ override generate() {
+ return generateGetChunkAssetRuntimeCode(this.chunk!);
+ }
+}

packages/docusaurus/src/webpack/server.ts

@@ -38,8 +38,6 @@ export default async function createServerConfig(params: {
  path: outputDir,
  filename: outputFilename,
  libraryTarget: 'commonjs2',
- // Workaround for Webpack 4 Bug (https://github.com/webpack/webpack/issues/6522)
- globalObject: 'this',
  },
  plugins: [
  // Show compilation progress bar.