eduard/DPROD-2750/HTML, CSS, webpack optimizations

gatsby-config.js

@@ -57,19 +57,43 @@ module.exports = {
         //     },
         // },
         'gatsby-plugin-postcss',
+        {
+            resolve: 'gatsby-plugin-html-minifier',
+            options: {
+                collapseWhitespace: true,
+                decodeEntities: true,
+                minifyCSS: true,
+                minifyJS: true,
+                removeComments: true,
+                removeEmptyAttributes: true,
+                removeRedundantAttributes: true,
+                useShortDoctype: true,
+            },
+        },
         {
             resolve: 'gatsby-plugin-sass',
             options: {
                 postCssPlugins: [
                     require('postcss-discard-duplicates'),
+                    require('autoprefixer'), // better cross-browser compatibility
                     plugin({
                         dest: 'src/classnames.d.ts',
-                        // Set isModule if you want to import ClassNames from another file
-                        // isModule: true,
-                        exportAsDefault: true, // to use in combination with isModule
+                        exportAsDefault: true,
                     }),
                     require('cssnano')({
-                        preset: 'default',
+                        preset: [
+                            'default',
+                            {
+                                discardComments: { removeAll: true },
+                                discardUnused: true,
+                                mergeIdents: true,
+                                reduceIdents: true,
+                                mergeRules: true,
+                                minifySelectors: true,
+                                discardEmpty: true,
+                                minifyFontValues: true,
+                            },
+                        ],
                     }),
                 ],
             },

gatsby-node.js

@@ -4,6 +4,10 @@ const language_config_en = require(`./i18n-config-en.js`)
 const path = require('path')
 const { copyLibFiles } = require('@builder.io/partytown/utils')
 const { exec } = require('child_process')
+const webpack = require('webpack')
+const StylelintPlugin = require('stylelint-webpack-plugin')
+const TerserPlugin = require('terser-webpack-plugin')
+
 const translations_cache = {}
 
 function OSFunction() {
@@ -407,36 +411,60 @@ exports.onCreatePage = ({ page, actions }) => {
     }
 }
 
-const StylelintPlugin = require('stylelint-webpack-plugin')
-const TerserPlugin = require('terser-webpack-plugin')
-
 const style_lint_options = {
     files: 'src/**/*.js',
     emitErrors: false,
     lintDirtyModulesOnly: true,
 }
 
-exports.onCreateWebpackConfig = ({ stage, actions, loaders, getConfig }, { ...options }) => {
-    const config = getConfig()
-    if (config.optimization) {
-        config.optimization.minimizer = [new TerserPlugin()]
-    }
-    if (stage === 'build-html' || stage === 'develop-html') {
-        actions.setWebpackConfig({
-            module: {
-                rules: [
-                    {
-                        test: /analytics/,
-                        use: loaders.null(),
-                    },
-                ],
-            },
-        })
-    }
+exports.onCreateWebpackConfig = ({ stage, actions, loaders }, { ...options }) => {
+    // const config = getConfig()
+    // const isProduction = config.mode === 'production'
+    const isProduction = true
+
     actions.setWebpackConfig({
-        plugins: [new StylelintPlugin({ ...style_lint_options, ...options })],
+        devtool: !isProduction, // enable/disable source-maps
+        mode: isProduction ? 'production' : 'development',
+        optimization: {
+            minimize: true,
+            minimizer: [new TerserPlugin()],
+            // splitChunks: {
+            //     chunks: 'all',
+            //     name: "deriv-com",
+            // },
+
+            mangleExports: 'size',
+            mangleWasmImports: true,
+
+            mergeDuplicateChunks: true,
+            removeAvailableModules: true,
+            removeEmptyChunks: true,
+            innerGraph: true,
+
+            chunkIds: 'size',
+            moduleIds: 'size',
+
+            // runtimeChunk: 'single', // compilation fails
+            sideEffects: true,
+
+            concatenateModules: true,
+            providedExports: true,
+            usedExports: true,
+        },
+        plugins: [
+            new StylelintPlugin({...style_lint_options, ...options}),
+            new webpack.optimize.LimitChunkCountPlugin({maxChunks: 1}), // works, merges chunks together
+        ],
         resolve: {
             modules: [path.resolve(__dirname, 'src'), 'node_modules'],
         },
+        ...((stage === 'build-html' || stage === 'develop-html') ? {
+            module: {
+                rules: [{
+                    test: /analytics/,
+                    use: loaders.null()
+                }]
+            }
+        } : {}),
     })
 }

package.json

@@ -13,7 +13,7 @@
         "@deriv/analytics": "^1.4.4",
         "@deriv/deriv-api": "^1.0.13",
         "@deriv/quill-design": "^1.2.16",
-        "@deriv/quill-icons": "^1.1.13",
+        "@deriv/quill-icons": "^1.14.0",
         "@hookform/resolvers": "^3.3.2",
         "@livechat/customer-sdk": "^3.1.5",
         "@loadable/component": "^5.15.3",
@@ -39,6 +39,7 @@
         "gatsby": "^5.12.11",
         "gatsby-plugin-anchor-links": "^1.2.1",
         "gatsby-plugin-canonical-urls": "^5.12.0",
+        "gatsby-plugin-html-minifier": "^2.0.0",
         "gatsby-plugin-image": "3.11.0",
         "gatsby-plugin-manifest": "^5.12.3",
         "gatsby-plugin-robots-txt": "^1.8.0",
@@ -75,6 +76,7 @@
         "rxjs": "^7.8.1",
         "sass": "^1.69.5",
         "swiper": "^9.4.1",
+        "terser-webpack-plugin": "^5.3.10",
         "use-query-params": "^1.2.3",
         "usehooks-ts": "^2.9.1",
         "webpack": "^5.89.0",