fix(BUG): experimental changes are removed (#436)

* fix(BUG): experimental changes are removed

* fix(BUG): experimental changes are removed

.gitignore

@@ -14,6 +14,8 @@ frontend/coverage
 frontend/build
 frontend/.vscode
 frontend/.yarnclean
+frontend/.temp_cache
+
 # misc
 .DS_Store
 .env.local

frontend/package.json

@@ -4,8 +4,8 @@
 	"description": "",
 	"main": "webpack.config.js",
 	"scripts": {
-		"dev": "NODE_OPTIONS=\"--loader ts-node/esm\" NODE_ENV=development webpack serve --config=webpack.config.ts --progress",
+		"dev": "NODE_ENV=development webpack serve --progress",
-		"build": "NODE_OPTIONS=\"--loader ts-node/esm\" webpack --config=webpack.config.prod.ts --progress",
+		"build": "webpack --config=webpack.config.prod.js --progress",
 		"prettify": "prettier --write .",
 		"lint": "eslint . --debug",
 		"lint:fix": "eslint . --fix --debug",
@@ -18,7 +18,6 @@
 	"engines": {
 		"node": ">=12.13.0"
 	},
-	"type": "module",
 	"author": "",
 	"license": "ISC",
 	"dependencies": {
@@ -52,6 +51,7 @@
 		"chart.js": "^3.4.0",
 		"chartjs-adapter-date-fns": "^2.0.0",
 		"css-loader": "4.3.0",
+		"css-minimizer-webpack-plugin": "^3.2.0",
 		"d3": "^6.2.0",
 		"d3-flame-graph": "^3.1.1",
 		"d3-tip": "^0.9.1",
@@ -73,6 +73,7 @@
 		"jest-circus": "26.6.0",
 		"jest-resolve": "26.6.0",
 		"jest-watch-typeahead": "0.6.1",
+		"mini-css-extract-plugin": "^2.4.5",
 		"monaco-editor": "^0.30.0",
 		"pnp-webpack-plugin": "1.6.4",
 		"postcss-loader": "3.0.0",
@@ -102,7 +103,7 @@
 		"semver": "7.3.2",
 		"style-loader": "1.3.0",
 		"styled-components": "^5.2.1",
-		"terser-webpack-plugin": "4.2.3",
+		"terser-webpack-plugin": "^5.2.5",
 		"ts-node": "^10.2.1",
 		"ts-pnp": "1.2.0",
 		"tsconfig-paths-webpack-plugin": "^3.5.1",

frontend/webpack.config.js

@@ -1,23 +1,16 @@
 // shared config (dev and prod)
-import dotenv from 'dotenv';
+const { resolve } = require('path');
-import HtmlWebpackPlugin from 'html-webpack-plugin';
+const HtmlWebpackPlugin = require('html-webpack-plugin');
-import { resolve } from 'path';
+const portFinderSync = require('portfinder-sync');
-//@ts-ignore
+const dotenv = require('dotenv');
-import portFinderSync from 'portfinder-sync';
+const webpack = require('webpack');
-import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
-import webpack from 'webpack';
-import { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server';
 
 dotenv.config();
 
-const __dirname = resolve();
 console.log(resolve(__dirname, './src/'));
 
-interface Configuration extends webpack.Configuration {
+const config = {
-	devServer?: WebpackDevServerConfiguration;
-}
-
-const config: Configuration = {
 	mode: 'development',
 	devtool: 'source-map',
 	entry: resolve(__dirname, './src/index.tsx'),
@@ -35,11 +28,6 @@ const config: Configuration = {
 	},
 	target: 'web',
 	output: {
-		filename: ({ chunk }) => {
-			const hash = chunk?.hash;
-			const name = chunk?.name;
-			return `js/${name}-${hash}.js`;
-		},
 		path: resolve(__dirname, './build'),
 		publicPath: '/',
 	},
@@ -56,11 +44,7 @@ const config: Configuration = {
 			},
 			{
 				test: /\.css$/,
-				use: ['style-loader', 'css-loader'],
+				use: ['css-loader'],
-			},
-			{
-				test: /\.(scss|sass)$/,
-				use: ['style-loader', 'css-loader', 'sass-loader'],
 			},
 			{
 				test: /\.(jpe?g|png|gif|svg)$/i,
@@ -89,4 +73,4 @@ const config: Configuration = {
 	},
 };
 
-export default config;
+module.exports = config;

frontend/webpack.config.prod.js

@@ -0,0 +1,110 @@
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+// shared config (dev and prod)
+const { resolve } = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
+const CompressionPlugin = require('compression-webpack-plugin');
+const webpack = require('webpack');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const config = {
+	mode: 'production',
+	entry: resolve(__dirname, './src/index.tsx'),
+	output: {
+		path: resolve(__dirname, './build'),
+		publicPath: '/',
+	},
+	resolve: {
+		extensions: ['.ts', '.tsx', '.js', '.jsx'],
+		plugins: [new TsconfigPathsPlugin({})],
+	},
+	cache: {
+		type: 'filesystem',
+		allowCollectingMemory: true,
+		cacheDirectory: resolve(__dirname, '.temp_cache'),
+		buildDependencies: {
+			// This makes all dependencies of this file - build dependencies
+			config: [__filename],
+			// By default webpack and loaders are build dependencies
+		},
+	},
+
+	module: {
+		rules: [
+			{
+				test: [/\.jsx?$/, /\.tsx?$/],
+				use: ['babel-loader'],
+				exclude: /node_modules/,
+			},
+			{
+				test: /\.css$/,
+				use: [MiniCssExtractPlugin.loader, 'css-loader'],
+			},
+			{
+				test: /\.(jpe?g|png|gif|svg)$/i,
+				use: [
+					'file-loader?hash=sha512&digest=hex&name=img/[chunkhash].[ext]',
+					'image-webpack-loader?bypassOnDebug&optipng.optimizationLevel=7&gifsicle.interlaced=false',
+				],
+			},
+			{
+				test: /\.(ttf|eot|woff|woff2)$/,
+				use: ['file-loader'],
+			},
+		],
+	},
+	plugins: [
+		new HtmlWebpackPlugin({ template: 'src/index.html.ejs' }),
+		new CompressionPlugin({
+			exclude: /.map$/,
+		}),
+		new CopyPlugin({
+			patterns: [{ from: resolve(__dirname, 'public/'), to: '.' }],
+		}),
+		new webpack.ProvidePlugin({
+			process: 'process/browser',
+		}),
+		new webpack.DefinePlugin({
+			'process.env': JSON.stringify(process.env),
+		}),
+		new MiniCssExtractPlugin(),
+	],
+	optimization: {
+		chunkIds: 'named',
+		concatenateModules: true,
+		emitOnErrors: true,
+		flagIncludedChunks: true,
+		innerGraph: true, //tells webpack whether to conduct inner graph analysis for unused exports.
+		mangleWasmImports: true,
+		mergeDuplicateChunks: true,
+		minimize: true,
+		nodeEnv: 'production',
+		runtimeChunk: {
+			name: (entrypoint) => `runtime~${entrypoint.name}`,
+		},
+		minimizer: [
+			new TerserPlugin({
+				parallel: true,
+				terserOptions: {
+					compress: true,
+					keep_classnames: true,
+					keep_fnames: false,
+					sourceMap: false,
+					safari10: true,
+					parse: {
+						html5_comments: false,
+					},
+				},
+			}),
+			new CssMinimizerPlugin(),
+		],
+	},
+	performance: {
+		hints: 'warning',
+	},
+};
+
+module.exports = config;

frontend/webpack.config.prod.ts

@@ -1,77 +0,0 @@
-// shared config (dev and prod)
-import CompressionPlugin from 'compression-webpack-plugin';
-import CopyPlugin from 'copy-webpack-plugin';
-import HtmlWebpackPlugin from 'html-webpack-plugin';
-import { resolve } from 'path';
-import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
-import webpack, { WebpackPluginInstance } from 'webpack';
-
-const __dirname = resolve();
-
-const config: webpack.Configuration = {
-	mode: 'production',
-	devtool: 'source-map',
-	entry: resolve(__dirname, './src/index.tsx'),
-	output: {
-		filename: ({ chunk }): string => {
-			const hash = chunk?.hash;
-			const name = chunk?.name;
-			return `js/${name}-${hash}.js`;
-		},
-		path: resolve(__dirname, './build'),
-		publicPath: '/',
-	},
-
-	resolve: {
-		extensions: ['.ts', '.tsx', '.js', '.jsx'],
-		plugins: [new TsconfigPathsPlugin({})],
-	},
-	module: {
-		rules: [
-			{
-				test: [/\.jsx?$/, /\.tsx?$/],
-				use: ['babel-loader'],
-				exclude: /node_modules/,
-			},
-			{
-				test: /\.css$/,
-				use: ['style-loader', 'css-loader'],
-			},
-			{
-				test: /\.(scss|sass)$/,
-				use: ['style-loader', 'css-loader', 'sass-loader'],
-			},
-			{
-				test: /\.(jpe?g|png|gif|svg)$/i,
-				use: [
-					'file-loader?hash=sha512&digest=hex&name=img/[chunkhash].[ext]',
-					'image-webpack-loader?bypassOnDebug&optipng.optimizationLevel=7&gifsicle.interlaced=false',
-				],
-			},
-			{
-				test: /\.(ttf|eot|woff|woff2)$/,
-				use: ['file-loader'],
-			},
-		],
-	},
-	plugins: [
-		new HtmlWebpackPlugin({ template: 'src/index.html.ejs' }),
-		(new CompressionPlugin({
-			exclude: /.map$/,
-		}) as unknown) as WebpackPluginInstance,
-		(new CopyPlugin({
-			patterns: [{ from: resolve(__dirname, 'public/'), to: '.' }],
-		}) as unknown) as WebpackPluginInstance,
-		new webpack.ProvidePlugin({
-			process: 'process/browser',
-		}),
-		new webpack.DefinePlugin({
-			'process.env': JSON.stringify(process.env),
-		}),
-	],
-	performance: {
-		hints: false,
-	},
-};
-
-export default config;