Merge pull request #4980 from alphagov/fix-webpack-integration-config

Fix tree-shaking of inner modules for the Webpack integration

.github/workflows/bundler-integrations.yml

@@ -35,8 +35,17 @@ jobs:
         run: npm run ${{matrix.bundler}} -w @govuk-frontend/bundler-integrations
 
       # Check output for modules that should not be included
-      - name: Check output
+      - name: Check absence of unused modules in `single-component.js`
         working-directory: ./.github/workflows/bundler-integrations
         run: |
           ! grep "Accordion" dist/${{matrix.bundler}}/single-component.js -q
+
+      - name: Check absence of unused utility functions in `single-component.js`
+        working-directory: ./.github/workflows/bundler-integrations
+        run: |
+          ! grep "getFragmentFromUrl" dist/${{matrix.bundler}}/single-component.js -q
+
+      - name: Check presence of modules in `initAll.js`
+        working-directory: ./.github/workflows/bundler-integrations
+        run: |
           grep "Accordion" dist/${{matrix.bundler}}/initAll.js -q

.github/workflows/bundler-integrations/package.json

@@ -19,6 +19,7 @@
     "del-cli": "^5.1.0",
     "govuk-frontend": "*",
     "rollup": "^4.17.2",
+    "terser-webpack-plugin": "^5.3.10",
     "vite": "^5.2.10",
     "webpack": "^5.91.0"
   }

.github/workflows/bundler-integrations/webpack.config.js

@@ -1,11 +1,28 @@
+const TerserPlugin = require('terser-webpack-plugin')
+
 /** @type {import('webpack').Configuration} */
 module.exports = {
+  // Enable production mode for Webpack, as tree-shaking is a combination of
+  // - `usedExports` including, but not exporting code `export`s that are not used
+  // - `TerserPlugin` clearing unused code, effectively clearing the unused exports
+  //
+  // More details: https://webpack.js.org/guides/tree-shaking/
+  // (especially the end of 'Add a Utility', and 'Minify the Output')
+  mode: 'production',
   optimization: {
-    // Configure WebPack to drop exports that are not used from the code
-    // so we can disable Terser and still check what's being included
-    usedExports: true,
-    // Prevent minification so we can see what's going on in the built file
-    minimize: false
+    minimizer: [
+      new TerserPlugin({
+        extractComments: false,
+        terserOptions: {
+          mangle: false,
+          // Reproduce Webpack's defaults
+          // https://webpack.js.org/configuration/optimization/#optimizationminimizer
+          compress: {
+            passes: 2
+          }
+        }
+      })
+    ]
   },
   target: 'web',
   entry: {