From 9700deeba5744d4e8efbd48353677ef6c0b222b9 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sat, 4 Sep 2021 15:19:50 -0500 Subject: [PATCH 1/5] Webpack: add SpeedMeasurePlugin --- package.json | 1 + webpack/development.js | 7 +++++-- webpack/production.js | 8 +++++--- yarn.lock | 7 +++++++ 4 files changed, 18 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 6ce9d397e..1423cbeff 100644 --- a/package.json +++ b/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", diff --git a/webpack/development.js b/webpack/development.js index 10ed123ae..63575edf5 100644 --- a/webpack/development.js +++ b/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', @@ -94,4 +97,4 @@ module.exports = merge(sharedConfig, { serveIndex: true, proxy: makeProxyConfig(), }, -}); +})); diff --git a/webpack/production.js b/webpack/production.js index 01ba2d76b..31a700955 100644 --- a/webpack/production.js +++ b/webpack/production.js @@ -6,10 +6,12 @@ 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', @@ -97,4 +99,4 @@ module.exports = merge(sharedConfig, { // }, }), ], -}); +})); diff --git a/yarn.lock b/yarn.lock index edbe92d7d..7d723e184 100644 --- a/yarn.lock +++ b/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" From 16470c605f24f866f688a3f3dc69affaafd657cf Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sat, 4 Sep 2021 15:27:31 -0500 Subject: [PATCH 2/5] Webpack: remove unneeded NormalModuleReplacementPlugin It was adding 1 minute to build time, and the upstream issue is already fixed: https://github.com/remix-run/react-router/pull/5589 --- webpack/shared.js | 7 ------- 1 file changed, 7 deletions(-) diff --git a/webpack/shared.js b/webpack/shared.js index 817e91ebd..23f781d6a 100644 --- a/webpack/shared.js +++ b/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', From 5ea4a8e86992aface14b68d2583a6369fb6211c6 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sat, 4 Sep 2021 16:05:20 -0500 Subject: [PATCH 3/5] Webpack: suppress output --- webpack/development.js | 7 +------ webpack/production.js | 2 +- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/webpack/development.js b/webpack/development.js index 63575edf5..05eb94649 100644 --- a/webpack/development.js +++ b/webpack/development.js @@ -83,12 +83,7 @@ module.exports = smp.wrap(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/**' }, diff --git a/webpack/production.js b/webpack/production.js index 31a700955..1882cd8e9 100644 --- a/webpack/production.js +++ b/webpack/production.js @@ -14,7 +14,7 @@ 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, From e8623d0af84cbbd13f0458440672c7634a165eaf Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sat, 4 Sep 2021 16:19:33 -0500 Subject: [PATCH 4/5] Webpack: UnusedFilesWebpackPlugin: ignore locale whitelist files, about.example --- webpack/shared.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/webpack/shared.js b/webpack/shared.js index 23f781d6a..dae74cd86 100644 --- a/webpack/shared.js +++ b/webpack/shared.js @@ -82,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 From 13e330ebeb221ac1f48b6cbd095aac831f6e53bb Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sat, 4 Sep 2021 16:43:57 -0500 Subject: [PATCH 5/5] Webpack: suppress polyfill output --- babel.config.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/babel.config.js b/babel.config.js index 7ea3721a1..1e167ead6 100644 --- a/babel.config.js +++ b/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',