Merge pull request #12160 from kidroca/kidroca/chore/optimize-webpack

Speed up webpack build and rebuild times
Expensify · Oct 28, 2022 · 7b72886 · 7b72886
2 parents e91e795 + 4be013f
commit 7b72886
Show file tree

Hide file tree

Showing 4 changed files with 174 additions and 406 deletions.
diff --git a/config/webpack/webpack.common.js b/config/webpack/webpack.common.js
@@ -42,6 +42,15 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
         path: path.resolve(__dirname, '../../dist'),
         publicPath: '/',
     },
+    stats: {
+        warningsFilter: [
+            // @react-navigation for web uses the legacy modules (related to react-native-reanimated)
+            // This results in 33 warnings with stack traces that appear during build and each time we make a change
+            // We can't do anything about the warnings, and they only get in the way, so we suppress them
+            './node_modules/@react-navigation/drawer/lib/module/views/legacy/Drawer.js',
+            './node_modules/@react-navigation/drawer/lib/module/views/legacy/Overlay.js',
+        ],
+    },
     plugins: [
         new CleanWebpackPlugin(),
         new HtmlWebpackPlugin({
@@ -110,18 +119,6 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
                     new RegExp(`node_modules/(?!(${includeModules})/).*|.native.js$`),
                 ],
             },
-            {
-                test: /\.js$/,
-                loader: 'eslint-loader',
-                exclude: [
-                    /node_modules|\.native\.js$/,
-                ],
-                options: {
-                    cache: false,
-                    emitWarning: true,
-                    configFile: path.resolve(__dirname, '../../.eslintrc.js'),
-                },
-            },
 
             // Rule for react-native-web-webview
             {
@@ -178,11 +175,6 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
             'process/browser': require.resolve('process/browser'),
         },
     },
-    devServer: {
-        client: {
-            overlay: false,
-        },
-    },
 });
 
 module.exports = webpackConfig;
diff --git a/config/webpack/webpack.dev.js b/config/webpack/webpack.dev.js
@@ -2,6 +2,7 @@ const path = require('path');
 const portfinder = require('portfinder');
 const {DefinePlugin} = require('webpack');
 const {merge} = require('webpack-merge');
+const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
 const getCommonConfig = require('./webpack.common');
 
 const BASE_PORT = 8080;
@@ -25,14 +26,18 @@ module.exports = (env = {}) => portfinder.getPortPromise({port: BASE_PORT})
             };
 
         const baseConfig = getCommonConfig(env);
+        const speedMeasure = new SpeedMeasurePlugin();
 
-        return merge(baseConfig, {
+        const config = merge(baseConfig, {
             mode: 'development',
             devtool: 'eval-source-map',
             devServer: {
                 static: {
                     directory: path.join(__dirname, '../../dist'),
                 },
+                client: {
+                    overlay: false,
+                },
                 hot: true,
                 ...proxySettings,
                 historyApiFallback: true,
@@ -43,5 +48,16 @@ module.exports = (env = {}) => portfinder.getPortPromise({port: BASE_PORT})
                     'process.env.PORT': port,
                 }),
             ],
+            cache: {
+                type: 'filesystem',
+                name: env.platform || 'default',
+                buildDependencies: {
+                    // By default, webpack and loaders are build dependencies
+                    // This (also) makes all dependencies of this config file - build dependencies
+                    config: [__filename],
+                },
+            },
         });
+
+        return speedMeasure.wrap(config);
     });