diff --git a/web/.env.sample b/web/.env.sample deleted file mode 100644 index c5bc32798..000000000 --- a/web/.env.sample +++ /dev/null @@ -1,2 +0,0 @@ -PORT=3020 -API_URL=http://localhost:3000 diff --git a/web/config/webpack.common.js b/web/config/webpack.common.js index 5076df9f9..0bf06c0c6 100644 --- a/web/config/webpack.common.js +++ b/web/config/webpack.common.js @@ -34,8 +34,8 @@ module.exports = { target: 'web', context: CONTEXT, stats: { - modules: true, - children: true + modules: false, + children: false }, entry: { [moduleFederationConfig.name]: './src/public-path' @@ -186,92 +186,6 @@ module.exports = { extensions: ['.mjs', '.js', '.ts', '.tsx', '.json', '.ttf', '.scss'], plugins: [new TsconfigPathsPlugin()] }, - optimization: { - splitChunks: { - minSize: 20_480, - automaticNameDelimiter: '-', - - cacheGroups: { - common: { - test: /[\\/]node_modules[\\/]/, - priority: -5, - reuseExistingChunk: true, - chunks: 'initial', - name: 'vendor-common', - minSize: 20_480, - maxSize: 512_000 - }, - - default: { - minChunks: 2, - priority: -10, - reuseExistingChunk: true, - minSize: 20_480, - maxSize: 512_000 - }, - - // Opting out of defaultVendors, so rest of the node modules will be part of default cacheGroup - defaultVendors: false, - - react: { - test: /[\\/]node_modules[\\/](react-dom)[\\/]/, - name: 'vendor-react', - chunks: 'all', - priority: 50 - }, - - reactdom: { - test: /[\\/]node_modules[\\/](react-dom)[\\/]/, - name: 'vendor-react-dom', - chunks: 'all', - priority: 40 - }, - - reactrouterdom: { - test: /[\\/]node_modules[\\/](react-router-dom)[\\/]/, - name: 'vendor-react-router-dom', - chunks: 'all', - priority: 30, - minSize: 0 - }, - - blueprintjs: { - test: /[\\/]node_modules[\\/](@blueprintjs)[\\/]/, - name: 'vendor-blueprintjs', - chunks: 'all', - priority: 20 - }, - - restfulreact: { - test: /[\\/]node_modules[\\/](restful-react)[\\/]/, - name: 'vendor-restful-react', - chunks: 'all', - priority: 10 - }, - - designsystem: { - test: /[\\/]node_modules[\\/](@harnessio\/design-system)[\\/]/, - name: 'vendor-harnessio-design-system', - chunks: 'all', - priority: 5 - }, - - icons: { - test: /[\\/]node_modules[\\/](@harnessio\/icons)[\\/]/, - name: 'vendor-harnessio-icons', - chunks: 'all', - priority: 1 - }, - - uicore: { - test: /[\\/]node_modules[\\/](@harnessio\/uicore)[\\/]/, - name: 'vendor-harnessio-uicore', - chunks: 'all', - priority: 1 - } - } - } - }, plugins: [ new MiniCssExtractPlugin({ ignoreOrder: true, diff --git a/web/config/webpack.dev.js b/web/config/webpack.dev.js index ef7da635e..a50285004 100644 --- a/web/config/webpack.dev.js +++ b/web/config/webpack.dev.js @@ -24,11 +24,12 @@ const commonConfig = require('./webpack.common') const API_URL = process.env.API_URL ?? 'http://localhost:3000' const HOST = 'localhost' const PORT = process.env.PORT ?? 3020 +const STANDALONE = process.env.STANDALONE === 'true' const CONTEXT = process.cwd() console.info(`Starting development build... http://${HOST}:${PORT}`) console.info('Environment variables:') -console.table({ HOST, PORT, API_URL }) +console.table({ STANDALONE, HOST, PORT, API_URL }) const devConfig = { mode: 'development', @@ -37,11 +38,9 @@ const devConfig = { devtool: 'cheap-module-source-map', cache: { type: 'filesystem' }, output: { - publicPath: '/' - }, - optimization: { - runtimeChunk: 'single' + publicPath: STANDALONE ? '/' : 'auto' }, + optimization: STANDALONE ? { runtimeChunk: 'single' } : {}, devServer: { hot: true, host: HOST, diff --git a/web/config/webpack.prod.js b/web/config/webpack.prod.js index 83b1ecdea..c0f45f59d 100644 --- a/web/config/webpack.prod.js +++ b/web/config/webpack.prod.js @@ -23,7 +23,94 @@ const prodConfig = { context: CONTEXT, mode: 'production', entry: path.resolve(CONTEXT, '/src/index.tsx'), - devtool: process.env.ENABLE_SOURCE_MAP ? 'source-map' : false + devtool: process.env.ENABLE_SOURCE_MAP ? 'source-map' : false, + optimization: { + splitChunks: { + minSize: 20_480, + automaticNameDelimiter: '-', + + cacheGroups: { + common: { + test: /[\\/]node_modules[\\/]/, + priority: -5, + reuseExistingChunk: true, + chunks: 'initial', + name: 'vendor-common', + minSize: 20_480, + maxSize: 1_024_000 + }, + + default: { + minChunks: 2, + priority: -10, + reuseExistingChunk: true, + minSize: 20_480, + maxSize: 1_024_000 + }, + + // Opting out of defaultVendors, so rest of the node modules will be part of default cacheGroup + defaultVendors: false, + + react: { + test: /[\\/]node_modules[\\/](react)[\\/]/, + name: 'vendor-react', + chunks: 'all', + priority: 50, + minSize: 0 + }, + + reactdom: { + test: /[\\/]node_modules[\\/](react-dom)[\\/]/, + name: 'vendor-react-dom', + chunks: 'all', + priority: 40 + }, + + reactrouterdom: { + test: /[\\/]node_modules[\\/](react-router-dom)[\\/]/, + name: 'vendor-react-router-dom', + chunks: 'all', + priority: 30, + minSize: 0 + }, + + blueprintjs: { + test: /[\\/]node_modules[\\/](@blueprintjs)[\\/]/, + name: 'vendor-blueprintjs', + chunks: 'all', + priority: 20 + }, + + restfulreact: { + test: /[\\/]node_modules[\\/](restful-react)[\\/]/, + name: 'vendor-restful-react', + chunks: 'all', + priority: 10 + }, + + designsystem: { + test: /[\\/]node_modules[\\/](@harnessio\/design-system)[\\/]/, + name: 'vendor-harnessio-design-system', + chunks: 'all', + priority: 5 + }, + + icons: { + test: /[\\/]node_modules[\\/](@harnessio\/icons)[\\/]/, + name: 'vendor-harnessio-icons', + chunks: 'all', + priority: 1 + }, + + uicore: { + test: /[\\/]node_modules[\\/](@harnessio\/uicore)[\\/]/, + name: 'vendor-harnessio-uicore', + chunks: 'all', + priority: 1 + } + } + } + } } module.exports = merge(commonConfig, prodConfig)