Merge pull request #124 from KidkArolis/rspack-improvements

Rspack improvements

.github/workflows/test.yml

@@ -5,13 +5,12 @@ name: Node.js CI
 
 on:
   push:
-    branches: [ "master" ]
+    branches: ['master']
   pull_request:
-    branches: [ "master" ]
+    branches: ['master']
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     strategy:
@@ -20,12 +19,12 @@ jobs:
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
-    - uses: actions/checkout@v4
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v4
-      with:
-        node-version: ${{ matrix.node-version }}
-        cache: 'npm'
-    - run: npm ci
-    - run: npm run build --if-present
-    - run: npm test
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+      - run: npm ci
+      - run: npm run build --if-present
+      - run: npm test

README.md

@@ -40,6 +40,10 @@ Inspect the bundle size and make up:
 
     $ jetpack inspect
 
+Inspect the build performance and bundle details:
+
+    $ jetpack doctor
+
 Print what browsers will be supported:
 
     $ jetpack browsers

lib/build.js

@@ -82,7 +82,8 @@ module.exports = async function build(options, log) {
     }
   }
 
-  // TODO sass-embedded seems to be holding up the process
+  // TODO sass-loader with sass-embedded seems to be holding up the process
+  // remove once https://github.com/webpack-contrib/sass-loader/issues/1244 is fixed fully
   process.exit(0)
 }
 

lib/cli.js

@@ -34,6 +34,8 @@ program.command('build').description('build for production').action(setCommand('
 
 program.command('inspect').description('analyze bundle').action(setCommand('inspect'))
 
+program.command('doctor').description('analyze bundle').action(setCommand('doctor'))
+
 program
   .command('browsers')
   .option('--coverage [country]', 'display coverage, e.g. --coverage, --coverage=US')

lib/doctor.js

@@ -0,0 +1,34 @@
+const fs = require('fs-extra')
+const path = require('path')
+const rspack = require('@rspack/core')
+const { RsdoctorRspackPlugin } = require('@rsdoctor/rspack-plugin')
+const wpConf = require('./webpack.config')
+
+module.exports = async function (options, log) {
+  log.info('Generating report...')
+  process.env.NODE_ENV = 'production'
+  const webpackConfigs = await wpConf(options, log)
+  const webpackConfig = !options.target.modern ? webpackConfigs.legacy : webpackConfigs.modern
+  webpackConfig.plugins = webpackConfig.plugins || []
+  webpackConfig.plugins.push(new RsdoctorRspackPlugin())
+  const compiler = rspack(webpackConfig)
+  compiler.run(async function (err, stats) {
+    if (err) return console.log(err)
+    if (options.static && isDir(path.join(options.dir, options.static))) {
+      await fs.copy(path.join(options.dir, options.static), path.join(options.dir, options.dist, options.static))
+    }
+    console.log(
+      stats.toString({
+        colors: true
+      })
+    )
+  })
+}
+
+function isDir(path) {
+  try {
+    return fs.lstatSync(path).isDirectory(path)
+  } catch (err) {
+    return false
+  }
+}

lib/webpack.css.js

@@ -64,7 +64,10 @@ module.exports = async (config, options) => {
     config.plugins.push(
       new MiniCssExtractPlugin({
         filename: '[name].[contenthash:8].css',
-        chunkFilename: '[name].[contenthash:8].chunk.css'
+        chunkFilename: '[name].[contenthash:8].chunk.css',
+        // if css modules are used in the project, then
+        // the order should not matter (unless :global() is used)
+        ignoreOrder: options.css.modules
       })
     )
     if (options.minify) {

lib/webpack.hot.js

@@ -27,6 +27,7 @@ module.exports = (config, options) => {
           rule.use.forEach((loader) => {
             if (loader.loader === require.resolve('swc-loader')) {
               loader.options.jsc.transform.react = {
+                runtime: 'automatic',
                 development: true,
                 refresh: true
               }

lib/webpack.js.js

@@ -15,9 +15,11 @@ module.exports = (config, options) => {
           },
           jsc: {
             parser: {
-              jsx: true,
-              exportDefaultFrom: true
+              syntax: 'ecmascript',
+              exportDefaultFrom: true,
+              jsx: true
             },
+            externalHelpers: true,
             transform: {}
           }
         }
@@ -43,14 +45,15 @@ module.exports = (config, options) => {
           env: {
             targets: browsers.query(options),
             coreJs: 3,
-            mode: 'entry',
-            exclude: ['transform-typeof-symbol']
+            mode: 'entry'
           },
           jsc: {
             parser: {
-              jsx: true,
-              exportDefaultFrom: true
+              syntax: 'ecmascript',
+              exportDefaultFrom: true,
+              jsx: true
             },
+            externalHelpers: true,
             transform: {}
           }
         }
@@ -59,20 +62,15 @@ module.exports = (config, options) => {
   })
 
   if (options.production) {
-    if (options.minify) {
-      const TerserPlugin = require('terser-webpack-plugin')
-      config.plugins.push(
-        new TerserPlugin({
-          minify: TerserPlugin.swcMinify,
-          parallel: true,
-          terserOptions: {
-            mangle: true,
-            compress: true
-          }
-        })
-      )
-    } else {
-      config.optimization.minimizer = []
-    }
+    config.optimization.minimizer = options.minify
+      ? [
+          new (require('@rspack/core').SwcJsMinimizerRspackPlugin)({
+            minimizerOptions: {
+              mangle: true,
+              compress: true
+            }
+          })
+        ]
+      : []
   }
 }