chore: split build files into smaller chunks

Author: pczeglik-iohk

apps/browser-extension-wallet/webpack.app.dev.js

@@ -1,11 +1,11 @@
 const { merge } = require('webpack-merge');
 
-const createDevConfig = require('./webpack.common.dev');
-const appConfig = require('./webpack.common.app');
+const commonDevConfig = require('./webpack.common.dev');
+const commonAppConfig = require('./webpack.common.app');
 require('dotenv-defaults').config({
   path: './.env',
   encoding: 'utf8',
   defaults: process.env.BUILD_DEV_PREVIEW === 'true' ? './.env.developerpreview' : './.env.defaults'
 });
 
-module.exports = (env) => merge(createDevConfig({ devServerPort: 3001 })(env), appConfig());
+module.exports = (env) => merge(commonDevConfig({ devServerPort: 3001 })(env), commonAppConfig());

apps/browser-extension-wallet/webpack.app.prod.js

@@ -1,7 +1,7 @@
 const { merge } = require('webpack-merge');
 
-const prodConfig = require('./webpack.common.prod');
-const appConfig = require('./webpack.common.app');
+const commonProdConfig = require('./webpack.common.prod');
+const commonAppConfig = require('./webpack.common.app');
 
 const hasSentryReleaseConfig =
   !!process.env.SENTRY_AUTH_TOKEN && !!process.env.SENTRY_ORG && !!process.env.SENTRY_PROJECT;
@@ -12,4 +12,4 @@ require('dotenv-defaults').config({
   defaults: process.env.BUILD_DEV_PREVIEW === 'true' ? './.env.developerpreview' : './.env.defaults'
 });
 
-module.exports = () => merge(prodConfig(), appConfig(hasSentryReleaseConfig));
+module.exports = () => merge(commonProdConfig(), commonAppConfig(hasSentryReleaseConfig));

apps/browser-extension-wallet/webpack.common.js

@@ -26,6 +26,7 @@ module.exports = () => {
     output: {
       path: path.join(__dirname, 'dist/js'),
       filename: '[name].js',
+      chunkFilename: '[name].[contenthash].chunk.js',
       // the following setting is required for SRI to work:
       crossOriginLoading: 'anonymous'
     },

apps/browser-extension-wallet/webpack.common.prod.js

@@ -11,7 +11,7 @@ require('dotenv-defaults').config({
 
 module.exports = () => ({
   mode: 'production',
-  devtool: 'source-map',
+  devtool: false,
   plugins: [
     new Dotenv({
       path: '.env',
@@ -75,6 +75,19 @@ module.exports = () => ({
           }
         }
       })
-    ]
+    ],
+    splitChunks: {
+      chunks: 'all',
+      maxSize: 3000000, // 3MB
+      cacheGroups: {
+        vendor: {
+          test: /[\\/]node_modules[\\/]/,
+          name: 'vendor',
+          chunks: 'all',
+          priority: 1,
+          reuseExistingChunk: true
+        }
+      }
+    }
   }
 });

apps/browser-extension-wallet/webpack.sw.dev.js

@@ -1,11 +1,11 @@
 const { merge } = require('webpack-merge');
 
-const createDevConfig = require('./webpack.common.dev');
-const swConfig = require('./webpack.common.sw');
+const commonDevConfig = require('./webpack.common.dev');
+const commonSwConfig = require('./webpack.common.sw');
 require('dotenv-defaults').config({
   path: './.env',
   encoding: 'utf8',
   defaults: process.env.BUILD_DEV_PREVIEW === 'true' ? './.env.developerpreview' : './.env.defaults'
 });
 
-module.exports = (env) => merge(createDevConfig({ devServerPort: 3000 })(env), swConfig());
+module.exports = (env) => merge(commonDevConfig({ devServerPort: 3000 })(env), commonSwConfig());

apps/browser-extension-wallet/webpack.sw.prod.js

@@ -1,7 +1,7 @@
 const { merge } = require('webpack-merge');
 
-const prodConfig = require('./webpack.common.prod');
-const swConfig = require('./webpack.common.sw');
+const commonProdConfig = require('./webpack.common.prod');
+const commonSwConfig = require('./webpack.common.sw');
 require('dotenv-defaults').config({
   path: './.env',
   encoding: 'utf8',
@@ -10,8 +10,8 @@ require('dotenv-defaults').config({
 
 module.exports = () =>
   merge(
-    prodConfig(),
-    swConfig(),
+    commonProdConfig(),
+    commonSwConfig(),
     // Needed for the service worker to work with a production build
     // TODO: after removing imports from dist/cjs, service worker no longer loads when built in production mode.
     // It is likely that some optimization is triggering it, such as tree shaking.

packages/nami/src/ui/app/components/transaction.tsx

@@ -28,8 +28,9 @@ import {
   FaUsers,
   FaRegFileCode,
 } from 'react-icons/fa';
-import { GiAnvilImpact } from 'react-icons/gi';
+
 import { IoRemoveCircleSharp } from 'react-icons/io5';
+import { GenIcon } from 'react-icons/lib';
 import {
   TiArrowForward,
   TiArrowBack,
@@ -53,6 +54,23 @@ import { contextLogger } from '@cardano-sdk/util';
 
 TimeAgo.addDefaultLocale(en);
 
+// extracted from `react-icons/gi` as react-icons does not support tree-shaking
+// and the whole library is imported and exceeds Mozilla's 4MB file limit
+const GiAnvilImpact = () =>
+  GenIcon({
+    tag: 'svg',
+    attr: { viewBox: '0 0 512 512' },
+    child: [
+      {
+        tag: 'path',
+        attr: {
+          d: 'M413.375 69.906L336.937 191.47l-8.25-32.69-30.218 88.97 62.655-29.375.22 29.438 127.03-50.938-70.813-1.97 47.782-68.686-73.47 39.25 21.5-95.564zM210.22 102.094l-32 14.406 16.874 55.656-177.813 80.03 12.564 27.876L207.656 200l30.406 49.47 49.313-22.19-21.344-70.343-55.81-54.843zM197.593 266.78v20.345h-88.906c15.994 38.807 51.225 65.43 88.906 74.28v32.97h58.562c-12.118 30.528-33.505 55.684-58.47 77.594H172.22v18.686H456.56V471.97h-27.406c-28.734-21.895-50.055-47.018-61.625-77.595h63.658v-29.188c19.748-6.995 39.5-19.51 59.25-36.687-19.812-17.523-39.23-27.25-59.25-31.938v-29.78H197.594z',
+        },
+        child: [],
+      },
+    ],
+  })({});
+
 const txTypeColor = {
   self: 'gray.500',
   internalIn: 'teal.500',

packages/nami/src/ui/app/pages/wallet.tsx

@@ -63,7 +63,7 @@ import {
   BsClockHistory,
 } from 'react-icons/bs';
 import { FaGamepad, FaRegFileCode } from 'react-icons/fa';
-import { GiTwoCoins, GiUsbKey } from 'react-icons/gi';
+import { GenIcon } from 'react-icons/lib';
 import { useHistory } from 'react-router-dom';
 
 import { getNextAccountIndex } from '../../../adapters/account';
@@ -120,6 +120,40 @@ export type Props = Pick<
   environmentName: OutsideHandlesContextValue['environmentName'];
 };
 
+// extracted from `react-icons/gi` as react-icons does not support tree-shaking
+// and the whole library is imported and exceeds Mozilla's 4MB file limit
+const GiUsbKey = () =>
+  GenIcon({
+    tag: 'svg',
+    attr: { viewBox: '0 0 512 512' },
+    child: [
+      {
+        tag: 'path',
+        attr: {
+          d: 'M394.8 30.88l-65 65.03 86.3 86.29 65.1-65-86.4-86.32zm-6.3 36.04l17 17-12.8 12.72-17-17 12.8-12.72zm-82.8 30.4l-11.3 11.28 109 108.9 11.3-11.2-109-108.98zM263.3 103L23.4 342.9v60.5l85.2 85.2h60.5l240-239.9L263.3 103zm164.9 3.6l16.9 17-12.8 12.6-16.9-17 12.8-12.6z',
+        },
+        child: [],
+      },
+    ],
+  })({});
+
+// extracted from `react-icons/gi` as react-icons does not support tree-shaking
+// and the whole library is imported and exceeds Mozilla's 4MB file limit
+const GiTwoCoins = () =>
+  GenIcon({
+    tag: 'svg',
+    attr: { viewBox: '0 0 512 512' },
+    child: [
+      {
+        tag: 'path',
+        attr: {
+          d: 'M264.4 95.01c-35.6-.06-80.2 11.19-124.2 34.09C96.27 152 61.45 182 41.01 211.3c-20.45 29.2-25.98 56.4-15.92 75.8 10.07 19.3 35.53 30.4 71.22 30.4 35.69.1 80.29-11.2 124.19-34 44-22.9 78.8-53 99.2-82.2 20.5-29.2 25.9-56.4 15.9-75.8-10.1-19.3-35.5-30.49-71.2-30.49zm91.9 70.29c-3.5 15.3-11.1 31-21.8 46.3-22.6 32.3-59.5 63.8-105.7 87.8-46.2 24.1-93.1 36.2-132.5 36.2-18.6 0-35.84-2.8-50.37-8.7l10.59 20.4c10.08 19.4 35.47 30.5 71.18 30.5 35.7 0 80.3-11.2 124.2-34.1 44-22.8 78.8-52.9 99.2-82.2 20.4-29.2 26-56.4 15.9-75.7zm28.8 16.8c11.2 26.7 2.2 59.2-19.2 89.7-18.9 27.1-47.8 53.4-83.6 75.4 11.1 1.2 22.7 1.8 34.5 1.8 49.5 0 94.3-10.6 125.9-27.1 31.7-16.5 49.1-38.1 49.1-59.9 0-21.8-17.4-43.4-49.1-59.9-16.1-8.4-35.7-15.3-57.6-20zm106.7 124.8c-10.2 11.9-24.2 22.4-40.7 31-35 18.2-82.2 29.1-134.3 29.1-21.2 0-41.6-1.8-60.7-5.2-23.2 11.7-46.5 20.4-68.9 26.1 1.2.7 2.4 1.3 3.7 2 31.6 16.5 76.4 27.1 125.9 27.1s94.3-10.6 125.9-27.1c31.7-16.5 49.1-38.1 49.1-59.9z',
+        },
+        child: [],
+      },
+    ],
+  })({});
+
 const Wallet = ({
   activeAddress,
   currency,