feat: RSpack to improve performance. (#4798)

* feat: rspack integration.

* fixed client side debugging.

* Rename zbuild and zserve scripts to build and serve

* fixed lock file.

Author: dlabaj

.github/workflows-src/partials/build.yml

@@ -6,7 +6,7 @@
 # v5 build
 - uses: actions/cache@v4
   id: site-cache
-  name: Load webpack cache
+  name: Load rspack cache
   with:
     path: "packages/documentation-site/.cache"
     key: ${{ runner.os }}-${{ hashFiles('yarn.lock') }}

.github/workflows/pr-preview.yml

@@ -24,7 +24,7 @@ jobs:
       # build
       - uses: actions/cache@v4
         id: site-cache
-        name: Load webpack cache
+        name: Load rspack cache
         with:
           path: "packages/documentation-site/.cache"
           key: ${{ runner.os }}-${{ hashFiles('yarn.lock') }}

package.json

@@ -38,6 +38,9 @@
     "@patternfly/react-code-editor": "^6.4.0",
     "@patternfly/react-core": "^6.5.0-prerelease.1",
     "@patternfly/react-table": "^6.5.0-prerelease.1",
+    "@rspack/cli": "^1.5.6",
+    "@rspack/core": "^1.5.6",
+    "@rspack/dev-server": "^1.1.4",
     "glob": "^8.1.0",
     "lerna": "^6.4.1",
     "react": "^18",

packages/documentation-framework/package.json

@@ -18,10 +18,8 @@
     "babel-loader": "^9.1.3",
     "camelcase-css": "2.0.1",
     "chokidar": "4.0.0",
-    "clean-webpack-plugin": "4.0.0",
     "codesandbox": "2.2.3",
     "commander": "4.1.1",
-    "copy-webpack-plugin": "13.0.0",
     "css-loader": "6.7.3",
     "detab": "2.0.3",
     "express": "4.21.2",
@@ -37,7 +35,6 @@
     "js-yaml": "3.14.0",
     "mdast-util-to-hast": "9.1.1",
     "mdurl": "1.0.1",
-    "mini-css-extract-plugin": "2.7.5",
     "null-loader": "4.0.1",
     "parse-entities": "2.0.0",
     "path-browserify": "1.0.1",
@@ -64,9 +61,7 @@
     "unist-util-visit": "2.0.3",
     "url-loader": "4.1.0",
     "vfile-reporter": "6.0.1",
-    "webpack": "5.94.0",
     "webpack-bundle-analyzer": "4.10.2",
-    "webpack-cli": "5.0.1",
     "webpack-dev-server": "5.2.2",
     "webpack-merge": "5.8.0"
   },

packages/documentation-framework/scripts/cli/build.js

@@ -1,13 +1,13 @@
 const path = require('path');
 const { fork } = require('child_process');
-const webpack = require('webpack');
+const rspack = require('@rspack/core');
 const { generate } = require('./generate');
 const { getConfig } = require('./helpers');
 
 async function buildWebpack(webpackConfig) {
   let compiler;
   try {
-    compiler = webpack(webpackConfig);
+    compiler = rspack(webpackConfig);
   } catch (err) {
     if (err.name === "WebpackOptionsValidationError") {
       console.error(err.message);

packages/documentation-framework/scripts/cli/start.js

@@ -1,15 +1,15 @@
-const WebpackDevServer = require('webpack-dev-server');
-const webpack = require('webpack');
+const { RspackDevServer }= require('@rspack/dev-server');
+const rspack = require('@rspack/core');
 const clientConfig = require('../webpack/webpack.client.config');
 const { generate } = require('./generate');
 const { getConfig } = require('./helpers');
 const { watchMD } = require('../md/parseMD');
 
-function startWebpackDevServer(webpackConfig) {
+function startDevServer(webpackConfig) {
   webpackConfig.devServer.static = false;
   const { port } = webpackConfig.devServer;
-  const compiler = webpack(webpackConfig);
-  const server = new WebpackDevServer(webpackConfig.devServer, compiler);
+  const compiler = rspack(webpackConfig);
+  const server = new RspackDevServer(webpackConfig.devServer, compiler);
 
   (async () => {
     await server.start();
@@ -20,9 +20,9 @@ function startWebpackDevServer(webpackConfig) {
 async function start(options) {
   generate(options, true);
   const webpackClientConfig = await clientConfig(null, { mode: 'development', ...getConfig(options) });
-  console.log('start webpack-dev-server');
+  console.log('start rspack-dev-server');
   watchMD();
-  startWebpackDevServer(webpackClientConfig);
+  startDevServer(webpackClientConfig);
 }
 
 module.exports = {

packages/documentation-framework/scripts/webpack/webpack.base.config.js

@@ -1,7 +1,5 @@
 const path = require('path');
-const webpack = require('webpack');
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
+const rspack = require('@rspack/core');
 
 module.exports = (_env, argv) => {
   const {
@@ -121,10 +119,10 @@ module.exports = (_env, argv) => {
       modules: module.paths
     },
     plugins: [
-      new webpack.ProvidePlugin({
+      new rspack.ProvidePlugin({
         process: 'process/browser'
       }),
-      new webpack.DefinePlugin({
+      new rspack.DefinePlugin({
         'process.env.NODE_ENV': JSON.stringify(mode),
         'process.env.googleAnalyticsID': JSON.stringify(isProd ? googleAnalyticsID : ''),
         'process.env.algolia': JSON.stringify(algolia),
@@ -142,7 +140,7 @@ module.exports = (_env, argv) => {
         'process.env.prnum': JSON.stringify(process.env.CIRCLE_PR_NUMBER || process.env.PR_NUMBER || ''),
         'process.env.prurl': JSON.stringify(process.env.CIRCLE_PULL_REQUEST || '')
       }),
-      new CopyWebpackPlugin({
+      new rspack.CopyRspackPlugin({
         patterns: [{ from: path.join(__dirname, '../../assets'), to: 'assets' }]
       })
     ],

packages/documentation-framework/scripts/webpack/webpack.client.config.js

@@ -2,10 +2,7 @@ const path = require('path');
 const fs = require('fs');
 const { merge } = require('webpack-merge');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const TerserPlugin = require('terser-webpack-plugin');
-const CopyPlugin = require('copy-webpack-plugin');
-const webpack = require('webpack');
+const rspack = require('@rspack/core');
 const baseConfig = require('./webpack.base.config');
 const { getHtmlWebpackPlugins } = require('./getHtmlWebpackPlugins');
 
@@ -74,7 +71,9 @@ const clientConfig = async (env, argv) => {
       },
       minimize: isProd ? true : false,
       minimizer: [
-        new TerserPlugin(),
+        new rspack.SwcJsMinimizerRspackPlugin({
+          // options
+        }),
       ],
       runtimeChunk: 'single',
     },
@@ -85,7 +84,7 @@ const clientConfig = async (env, argv) => {
           exclude: reactCSSRegex,
           use: [
             {
-              loader: MiniCssExtractPlugin.loader
+              loader: rspack.CssExtractRspackPlugin.loader
             },
             {
               loader: 'css-loader'
@@ -109,14 +108,14 @@ const clientConfig = async (env, argv) => {
       ]
     },
     plugins: [
-      new webpack.DefinePlugin({
+      new rspack.DefinePlugin({
         'process.env.PRERENDER': false,
       }),
-      new MiniCssExtractPlugin(!isProd ? {} : {
+      new rspack.CssExtractRspackPlugin(!isProd ? {} : {
         filename: 'css/[name].[contenthash].css',
         chunkFilename: 'css/[name].[contenthash].css',
       }),
-      new CopyPlugin({
+      new rspack.CopyRspackPlugin({
         patterns: [
           // versions.json will later be copied to the root www dir
           { from: path.join(__dirname, '../../versions.json'), to: 'versions.json' },

packages/documentation-framework/scripts/webpack/webpack.server.config.js

@@ -1,8 +1,7 @@
 const path = require('path');
-const webpack = require('webpack');
+const rspack = require('@rspack/core');
 const { merge } = require('webpack-merge');
 const baseConfig = require('./webpack.base.config');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const reactCSSRegex = /(react-[\w-]+\/dist|react-styles\/css)\/.*\.css$/;
 
 const serverConfig = async (env, argv) => {
@@ -14,7 +13,7 @@ const serverConfig = async (env, argv) => {
     },
     target: 'node', // Load chunks using require
     plugins: [
-      new webpack.DefinePlugin({
+      new rspack.DefinePlugin({
         'process.env.PRERENDER': true // In app.js don't call ReactDOM.render
       }),
     ],