Merge branch 'build-speedup' into 'develop'

Webpack: improve build performance

Closes #732

See merge request soapbox-pub/soapbox-fe!716

babel.config.js

@@ -26,7 +26,6 @@ module.exports = (api) => {
 
   switch (env) {
   case 'production':
-    envOptions.debug = false;
     config.plugins.push(...[
       'lodash',
       [
@@ -51,7 +50,6 @@ module.exports = (api) => {
     ]);
     break;
   case 'development':
-    envOptions.debug = true;
     config.plugins.push(...[
       '@babel/transform-react-jsx-source',
       '@babel/transform-react-jsx-self',

package.json

@@ -132,6 +132,7 @@
     "sass": "^1.20.3",
     "sass-loader": "^10.0.0",
     "semver": "^7.3.2",
+    "speed-measure-webpack-plugin": "^1.5.0",
     "stringz": "^2.0.0",
     "substring-trie": "^1.0.2",
     "terser-webpack-plugin": "^4.2.3",

webpack/development.js

@@ -2,8 +2,11 @@
 console.log('Running in development mode'); // eslint-disable-line no-console
 
 const { merge } = require('webpack-merge');
+const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
 const sharedConfig = require('./shared');
 
+const smp = new SpeedMeasurePlugin();
+
 const watchOptions = {};
 
 const backendUrl  = process.env.BACKEND_URL || 'http://localhost:4000';
@@ -48,7 +51,7 @@ if (process.env.VAGRANT) {
   watchOptions.poll = 1000;
 }
 
-module.exports = merge(sharedConfig, {
+module.exports = smp.wrap(merge(sharedConfig, {
   mode: 'development',
   cache: true,
   devtool: 'source-map',
@@ -80,12 +83,7 @@ module.exports = merge(sharedConfig, {
       'Access-Control-Allow-Origin': '*',
     },
     overlay: true,
-    stats: {
-      entrypoints: false,
-      errorDetails: false,
-      modules: false,
-      moduleTrace: false,
-    },
+    stats: 'errors-warnings',
     watchOptions: Object.assign(
       {},
       { ignored: '**/node_modules/**' },
@@ -94,4 +92,4 @@ module.exports = merge(sharedConfig, {
     serveIndex: true,
     proxy: makeProxyConfig(),
   },
-});
+}));

webpack/production.js

@@ -6,13 +6,15 @@ const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const OfflinePlugin = require('offline-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const CompressionPlugin = require('compression-webpack-plugin');
-
+const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
 const sharedConfig = require('./shared');
 
-module.exports = merge(sharedConfig, {
+const smp = new SpeedMeasurePlugin();
+
+module.exports = smp.wrap(merge(sharedConfig, {
   mode: 'production',
   devtool: 'source-map',
-  stats: 'normal',
+  stats: 'errors-warnings',
   bail: true,
   optimization: {
     minimize: true,
@@ -97,4 +99,4 @@ module.exports = merge(sharedConfig, {
       // },
     }),
   ],
-});
+}));

webpack/shared.js

@@ -68,13 +68,6 @@ module.exports = {
 
   plugins: [
     new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(env))),
-    new webpack.NormalModuleReplacementPlugin(
-      /^history\//, (resource) => {
-        // temporary fix for https://github.com/ReactTraining/react-router/issues/5576
-        // to reduce bundle size
-        resource.request = resource.request.replace(/^history/, 'history/es');
-      },
-    ),
     new MiniCssExtractPlugin({
       filename: 'packs/css/[name]-[contenthash:8].css',
       chunkFilename: 'packs/css/[name]-[contenthash:8].chunk.css',
@@ -89,7 +82,12 @@ module.exports = {
     new UnusedFilesWebpackPlugin({
       patterns: ['app/**/*.*'],
       globOptions: {
-        ignore: ['node_modules/**/*', '**/__*__/**/*'],
+        ignore: [
+          'node_modules/**/*',
+          '**/__*__/**/*',
+          'app/instance/about.example',
+          'app/soapbox/locales/whitelist_*.json',
+        ],
       },
     }),
     // https://github.com/jantimon/html-webpack-plugin#options

yarn.lock

@@ -11536,6 +11536,13 @@ specificity@^0.4.1:
   resolved "https://registry.yarnpkg.com/specificity/-/specificity-0.4.1.tgz#aab5e645012db08ba182e151165738d00887b019"
   integrity sha512-1klA3Gi5PD1Wv9Q0wUoOQN1IWAuPu0D1U03ThXTr0cJ20+/iq2tHSDnK7Kk/0LXJ1ztUB2/1Os0wKmfyNgUQfg==
 
+speed-measure-webpack-plugin@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/speed-measure-webpack-plugin/-/speed-measure-webpack-plugin-1.5.0.tgz#caf2c5bee24ab66c1c7c30e8daa7910497f7681a"
+  integrity sha512-Re0wX5CtM6gW7bZA64ONOfEPEhwbiSF/vz6e2GvadjuaPrQcHTQdRGsD8+BE7iUOysXH8tIenkPCQBEcspXsNg==
+  dependencies:
+    chalk "^4.1.0"
+
 split-string@^3.0.1, split-string@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"