Dangerously tweak webpack config

Make the output code cleaner/lighter
given browser extensions only work
via client client-side

Author: cezaraugusto

programs/develop/webpack/plugin-compilation/index.ts

@@ -1,6 +1,6 @@
 import * as fs from 'fs'
 import colors from 'pintor'
-import {Compiler} from '@rspack/core'
+import {Compiler, DefinePlugin} from '@rspack/core'
 import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin'
 import {EnvPlugin} from './env'
 import {CleanDistFolderPlugin} from './clean-dist'
@@ -49,51 +49,57 @@ export class CompilationPlugin {
       }).apply(compiler)
     }
 
-    compiler.hooks.done.tapAsync('develop:brand', (stats, done) => {
-      stats.compilation.name = undefined
-
-      // Calculate compilation time
-      const duration = stats.compilation.endTime! - stats.compilation.startTime!
-
-      const manifestName = JSON.parse(
-        fs.readFileSync(this.manifestPath, 'utf-8')
-      ).name
-
-      const hasErrors = stats.hasErrors()
-      const key = getCompilationKey(manifestName, hasErrors)
-      const rawLine = messages.boring(manifestName, duration, stats)
-      if (!rawLine) {
-        done()
-        return
-      }
-      const line: string = rawLine
-
-      // If message repeats, overwrite previous compilation line and append (Nx)
-      if (key === lastCompilationKey) {
-        repeatCompilationCount += 1
-        const suffix = colors.gray(` (${repeatCompilationCount}x) `)
-
-        // In TTY, overwrite only from the 3rd time onward to preserve the first blank line after summary
-        if (process.stdout.isTTY && repeatCompilationCount > 2) {
-          process.stdout.write('\u001b[1A')
-          process.stdout.write('\u001b[2K')
-          process.stdout.write(line + suffix + '\n')
-        } else {
-          console.log(line + suffix)
+    ;(new DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify(
+        compiler.options.mode || 'development'
+      )
+    }),
+      compiler.hooks.done.tapAsync('develop:brand', (stats, done) => {
+        stats.compilation.name = undefined
+
+        // Calculate compilation time
+        const duration =
+          stats.compilation.endTime! - stats.compilation.startTime!
+
+        const manifestName = JSON.parse(
+          fs.readFileSync(this.manifestPath, 'utf-8')
+        ).name
+
+        const hasErrors = stats.hasErrors()
+        const key = getCompilationKey(manifestName, hasErrors)
+        const rawLine = messages.boring(manifestName, duration, stats)
+        if (!rawLine) {
+          done()
+          return
         }
-      } else {
-        // New key: reset counter and print fresh line with newline
-        lastCompilationKey = key
-        repeatCompilationCount = 1
-
-        // Do not insert extra blank lines; keep messages sequential
-        if (!printedFirstCompilation) {
-          printedFirstCompilation = true
+        const line: string = rawLine
+
+        // If message repeats, overwrite previous compilation line and append (Nx)
+        if (key === lastCompilationKey) {
+          repeatCompilationCount += 1
+          const suffix = colors.gray(` (${repeatCompilationCount}x) `)
+
+          // In TTY, overwrite only from the 3rd time onward to preserve the first blank line after summary
+          if (process.stdout.isTTY && repeatCompilationCount > 2) {
+            process.stdout.write('\u001b[1A')
+            process.stdout.write('\u001b[2K')
+            process.stdout.write(line + suffix + '\n')
+          } else {
+            console.log(line + suffix)
+          }
+        } else {
+          // New key: reset counter and print fresh line with newline
+          lastCompilationKey = key
+          repeatCompilationCount = 1
+
+          // Do not insert extra blank lines; keep messages sequential
+          if (!printedFirstCompilation) {
+            printedFirstCompilation = true
+          }
+          console.log(line)
         }
-        console.log(line)
-      }
 
-      done()
-    })
+        done()
+      }))
   }
 }

programs/develop/webpack/plugin-js-frameworks/index.ts

@@ -1,4 +1,5 @@
 import * as path from 'path'
+import * as fs from 'fs'
 import {type Compiler} from '@rspack/core'
 import {PluginInterface} from '../webpack-types'
 import {maybeUseBabel} from './js-tools/babel'
@@ -31,6 +32,30 @@ export class JsFrameworksPlugin {
     const maybeInstallVue = await maybeUseVue(projectPath)
     const maybeInstallSvelte = await maybeUseSvelte(projectPath, mode as any)
 
+    // Derive transpile targets from extension manifest for leaner output
+    let targets: string[] = ['chrome >= 100']
+
+    try {
+      const manifest = JSON.parse(fs.readFileSync(this.manifestPath, 'utf-8'))
+      if (manifest?.minimum_chrome_version) {
+        targets = [`chrome >= ${manifest.minimum_chrome_version}`]
+      }
+
+      const geckoMin =
+        manifest?.browser_specific_settings?.gecko?.strict_min_version ||
+        manifest?.applications?.gecko?.strict_min_version
+
+      if (geckoMin) {
+        const major = parseInt(String(geckoMin).split('.')[0], 10)
+
+        if (!Number.isNaN(major)) {
+          targets.push(`firefox >= ${major}`)
+        }
+      }
+    } catch {
+      // Fail silently
+    }
+
     compiler.options.resolve.alias = {
       ...(maybeInstallBabel?.alias || {}),
       ...(maybeInstallReact?.alias || {}),
@@ -55,7 +80,7 @@ export class JsFrameworksPlugin {
             minify: mode === 'production',
             isModule: true,
             sourceMap: this.mode === 'development',
-            env: {targets: ['chrome >= 100']},
+            env: {targets},
             jsc: {
               parser: {
                 syntax: isUsingTypeScript(projectPath)

programs/develop/webpack/webpack-config.ts

@@ -80,9 +80,11 @@ export default function webpackConfig(
     // about requiring a callback when watch is enabled.
     watch: false,
     devtool:
-      manifest.manifest_version === 3
-        ? 'cheap-source-map'
-        : 'eval-cheap-source-map',
+      (devOptions.mode || 'development') === 'production'
+        ? false
+        : manifest.manifest_version === 3
+          ? 'cheap-source-map'
+          : 'eval-cheap-source-map',
     output: {
       clean: devOptions.output?.clean,
       path: userExtensionOutputPath,
@@ -118,7 +120,11 @@ export default function webpackConfig(
         '.json',
         '.wasm',
         '.svelte'
-      ]
+      ],
+      // Prefer browser fields and conditions; avoid Node-targeted builds
+      mainFields: ['browser', 'module', 'main'],
+      conditionNames: ['browser', 'import', 'module', 'default'],
+      aliasFields: ['browser']
     },
     watchOptions: {
       ignored: /node_modules|dist|extension-js\/profiles/
@@ -230,7 +236,21 @@ export default function webpackConfig(
       maxEntrypointSize: 999000
     },
     optimization: {
-      minimize: devOptions.mode === 'production'
+      // Minify only in production to reduce bundle size
+      minimize: devOptions.mode === 'production',
+      // Honor package.json sideEffects for better tree-shaking
+      sideEffects: true,
+      // Mark used exports globally to help dead-code elimination
+      usedExports: 'global',
+      // Merge small modules for smaller, faster bundles
+      concatenateModules: true,
+      // Keep a single file per entry (extensions expect static file names)
+      splitChunks: false,
+      // Do not extract runtime into a separate chunk (keep runtime inline)
+      runtimeChunk: false,
+      // Stable ids for reproducible builds and better caching
+      moduleIds: 'deterministic',
+      chunkIds: 'deterministic'
     },
     experiments: {
       // Enable native CSS support by default