Add webpack config for analyzing builds and improve ts speed

This commit is contained in:
Bill Thornton 2023-09-12 12:54:50 -04:00
parent 46f9a0fc8a
commit 5cb181f68c
4 changed files with 937 additions and 14 deletions

899
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -38,6 +38,7 @@
"eslint-plugin-react-hooks": "4.6.0", "eslint-plugin-react-hooks": "4.6.0",
"eslint-plugin-sonarjs": "0.19.0", "eslint-plugin-sonarjs": "0.19.0",
"expose-loader": "4.1.0", "expose-loader": "4.1.0",
"fork-ts-checker-webpack-plugin": "8.0.0",
"html-loader": "4.2.0", "html-loader": "4.2.0",
"html-webpack-plugin": "5.5.3", "html-webpack-plugin": "5.5.3",
"mini-css-extract-plugin": "2.7.6", "mini-css-extract-plugin": "2.7.6",
@ -48,6 +49,7 @@
"sass": "1.62.1", "sass": "1.62.1",
"sass-loader": "13.3.2", "sass-loader": "13.3.2",
"source-map-loader": "4.0.1", "source-map-loader": "4.0.1",
"speed-measure-webpack-plugin": "1.5.0",
"style-loader": "3.3.3", "style-loader": "3.3.3",
"stylelint": "15.6.2", "stylelint": "15.6.2",
"stylelint-config-rational-order": "0.1.2", "stylelint-config-rational-order": "0.1.2",
@ -57,6 +59,7 @@
"ts-loader": "9.4.4", "ts-loader": "9.4.4",
"typescript": "5.0.4", "typescript": "5.0.4",
"webpack": "5.88.1", "webpack": "5.88.1",
"webpack-bundle-analyzer": "4.9.1",
"webpack-cli": "5.1.4", "webpack-cli": "5.1.4",
"webpack-dev-server": "4.15.1", "webpack-dev-server": "4.15.1",
"webpack-merge": "5.9.0", "webpack-merge": "5.9.0",
@ -136,6 +139,7 @@
"scripts": { "scripts": {
"start": "npm run serve", "start": "npm run serve",
"serve": "webpack serve --config webpack.dev.js", "serve": "webpack serve --config webpack.dev.js",
"build:analyze": "cross-env NODE_ENV=\"production\" webpack --config webpack.analyze.js",
"build:development": "cross-env NODE_OPTIONS=\"--max_old_space_size=6144\" webpack --config webpack.dev.js", "build:development": "cross-env NODE_OPTIONS=\"--max_old_space_size=6144\" webpack --config webpack.dev.js",
"build:production": "cross-env NODE_ENV=\"production\" NODE_OPTIONS=\"--max_old_space_size=6144\" webpack --config webpack.prod.js", "build:production": "cross-env NODE_ENV=\"production\" NODE_OPTIONS=\"--max_old_space_size=6144\" webpack --config webpack.prod.js",
"build:check": "tsc --noEmit", "build:check": "tsc --noEmit",

28
webpack.analyze.js Normal file
View File

@ -0,0 +1,28 @@
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const { merge } = require('webpack-merge');
const prod = require('./webpack.prod');
const smp = new SpeedMeasurePlugin();
const config = merge(prod, {
plugins: [
new BundleAnalyzerPlugin({
excludeAssets: /-json\..*\.chunk\.js$/
})
]
});
const searchPlugin = (name) => config.plugins.findIndex((e) => e.constructor.name === name);
// NOTE: We need to re-add the mini css plugin to workaround this issue
// https://github.com/stephencookdev/speed-measure-webpack-plugin/issues/167
const miniCssPluginIndex = searchPlugin('MiniCssExtractPlugin');
const miniCssPlugin = config.plugins[miniCssPluginIndex];
const exportedConfig = smp.wrap(config);
exportedConfig.plugins[miniCssPluginIndex] = miniCssPlugin;
module.exports = exportedConfig;

View File

@ -1,6 +1,7 @@
const path = require('path'); const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin'); const CopyPlugin = require('copy-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { DefinePlugin } = require('webpack'); const { DefinePlugin } = require('webpack');
@ -100,6 +101,11 @@ const config = {
to: path.resolve(__dirname, './dist') to: path.resolve(__dirname, './dist')
}; };
}) })
}),
new ForkTsCheckerWebpackPlugin({
typescript: {
configFile: path.resolve(__dirname, 'tsconfig.json')
}
}) })
], ],
output: { output: {
@ -110,6 +116,8 @@ const config = {
}, },
optimization: { optimization: {
runtimeChunk: 'single', runtimeChunk: 'single',
removeAvailableModules: false,
removeEmptyChunks: false,
splitChunks: { splitChunks: {
chunks: 'all', chunks: 'all',
maxInitialRequests: Infinity, maxInitialRequests: Infinity,
@ -216,14 +224,22 @@ const config = {
exclude: /node_modules/, exclude: /node_modules/,
use: [ use: [
'worker-loader', 'worker-loader',
'ts-loader' {
loader: 'ts-loader',
options: {
transpileOnly: true
}
}
] ]
}, },
{ {
test: /\.(ts|tsx)$/, test: /\.(ts|tsx)$/,
exclude: /node_modules/, exclude: /node_modules/,
use: [{ use: [{
loader: 'ts-loader' loader: 'ts-loader',
options: {
transpileOnly: true
}
}] }]
}, },
/* modules that Babel breaks when transforming to ESM */ /* modules that Babel breaks when transforming to ESM */