feat: update webpack config to chunk node modules (#22)

build(webpack): update webpack config to chunk node modules
kibis-is · Nov 11, 2023 · a4f7d16 · a4f7d16
1 parent 63e6899
commit a4f7d16
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 11 deletions.
diff --git a/webpack/webpack.common.config.ts b/webpack/webpack.common.config.ts
@@ -3,7 +3,7 @@ import HtmlWebpackPlugin from 'html-webpack-plugin';
 import { resolve } from 'path';
 import { Configuration } from 'webpack';
 
-// Constants
+// constants
 import { APP_TITLE, BUILD_PATH, SRC_PATH } from './constants';
 
 const COMMON_PATH: string = resolve(SRC_PATH, 'common');
@@ -30,6 +30,7 @@ const config: Configuration = {
       'index.ts'
     ),
   },
+
   module: {
     rules: [
       {
@@ -45,11 +46,13 @@ const config: Configuration = {
       },
     ],
   },
+
   output: {
     clean: true,
     filename: '[name].js',
     path: BUILD_PATH,
   },
+
   plugins: [
     new CopyPlugin({
       patterns: [
@@ -66,7 +69,7 @@ const config: Configuration = {
         },
       ],
     }),
-    /* HTMLs */
+    /* htmls */
     new HtmlWebpackPlugin({
       chunks: ['background-app'],
       filename: 'background-app.html',
@@ -89,15 +92,16 @@ const config: Configuration = {
       title: APP_TITLE,
     }),
   ],
+
   resolve: {
     alias: {
-      // Common
+      // common
       ['@common/enums']: resolve(COMMON_PATH, 'enums'),
       ['@common/errors']: resolve(COMMON_PATH, 'errors'),
       ['@common/events']: resolve(COMMON_PATH, 'events'),
       ['@common/types']: resolve(COMMON_PATH, 'types'),
       ['@common/utils']: resolve(COMMON_PATH, 'utils'),
-      // Extension
+      // extension
       ['@extension/components']: resolve(EXTENSION_PATH, 'components'),
       ['@extension/config']: resolve(EXTENSION_PATH, 'config'),
       ['@extension/constants']: resolve(EXTENSION_PATH, 'constants'),
@@ -157,13 +161,19 @@ const config: Configuration = {
       ['@extension/translations']: resolve(EXTENSION_PATH, 'translations'),
       ['@extension/types']: resolve(EXTENSION_PATH, 'types'),
       ['@extension/utils']: resolve(EXTENSION_PATH, 'utils'),
-      // External
+      // external
       ['@external/constants']: resolve(EXTERNAL_PATH, 'constants'),
       ['@external/services']: resolve(EXTERNAL_PATH, 'services'),
       ['@external/types']: resolve(EXTERNAL_PATH, 'types'),
     },
+
     extensions: ['.js', '.ts', '.tsx'],
   },
+
+  stats: {
+    assetsSpace: 100,
+    modules: false,
+  },
 };
 
 export default config;
diff --git a/webpack/webpack.config.ts b/webpack/webpack.config.ts
@@ -4,12 +4,12 @@ import { Configuration, DefinePlugin } from 'webpack';
 import { Configuration as DevelopmentConfiguration } from 'webpack-dev-server';
 import { merge } from 'webpack-merge';
 
-// Config
+// config
 import { version } from '../package.json';
 import { browser_specific_settings } from '../src/manifest.json';
 import commonConfig from './webpack.common.config';
 
-// Constants
+// constants
 import {
   APP_TITLE,
   DEVELOPMENT_ENVIRONMENT,
@@ -19,14 +19,15 @@ import {
   PRODUCTION_ENVIRONMENT,
 } from './constants';
 
-// Plugins
+// plugins
 import WebExtPlugin from './plugins/WebExtPlugin';
 
 const dappPort: number = 8080;
+const maxSize: number = 4000000; // 4 MB
 
 const configs: (Configuration | DevelopmentConfiguration)[] = [
   /**
-   * Development
+   * development
    */
   merge(commonConfig, {
     devtool: 'cheap-module-source-map',
@@ -71,11 +72,15 @@ const configs: (Configuration | DevelopmentConfiguration)[] = [
       }),
     ],
   }),
+
   /**
-   * Production
+   * production
    */
   merge(commonConfig, {
+    devtool: 'source-map',
+
     mode: 'production',
+
     module: {
       rules: [
         {
@@ -92,7 +97,33 @@ const configs: (Configuration | DevelopmentConfiguration)[] = [
         },
       ],
     },
+
     name: PRODUCTION_ENVIRONMENT,
+
+    optimization: {
+      splitChunks: {
+        cacheGroups: {
+          vendor: {
+            chunks: 'all',
+            maxSize,
+            name: 'vendor',
+            reuseExistingChunk: true,
+            test: /[\\/]node_modules[\\/]/,
+          },
+        },
+      },
+
+      runtimeChunk: {
+        name: 'runtime',
+      },
+    },
+
+    performance: {
+      hints: 'warning',
+      maxAssetSize: maxSize,
+      maxEntrypointSize: 10000000, // 10 MB
+    },
+
     plugins: [
       new DefinePlugin({
         __EXTENSION_ID__: JSON.stringify(browser_specific_settings.gecko.id),
@@ -102,8 +133,9 @@ const configs: (Configuration | DevelopmentConfiguration)[] = [
       }),
     ],
   }),
+
   /**
-   * Example dApp
+   * example dapp
    */
   {
     devtool: 'cheap-module-source-map',