Split js chunks

build/webpack.config.js

@@ -1,4 +1,5 @@
 const path = require('path');
+const fs = require('fs');
 const webpack = require('webpack');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
@@ -24,8 +25,35 @@ module.exports = (env, argv) => {
 		output: {
 			path: DIST,
 			filename: '[name].js',
+			chunkFilename: '[name].js',
 			publicPath: './'
 		},
+		optimization: {
+			splitChunks: {
+				chunks: 'all',
+				cacheGroups: {
+					maplibre: {
+						test: /[\\/]node_modules[\\/]maplibre-gl[\\/]/,
+						name: 'maplibre',
+						chunks: 'all',
+						priority: 30,
+						enforce: true
+					},
+					uppy: {
+						test: /[\\/]node_modules[\\/](@uppy|@transloadit|namespace-emitter|nanoid)[\\/]/,
+						name: 'uppy',
+						chunks: 'async',
+						priority: 20,
+						enforce: true
+					}
+				}
+			}
+		},
+		performance: {
+			hints: isDev ? false : 'warning',
+			maxEntrypointSize: 1500 * 1024,
+			maxAssetSize: 1100 * 1024
+		},
 		module: {
 			rules: [{
 					test: /\.vue$/,
@@ -90,6 +118,18 @@ module.exports = (env, argv) => {
 				__VUE_PROD_DEVTOOLS__: 'false',
 				__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
 			}),
+			{
+				apply(compiler) {
+					compiler.hooks.done.tap('EntryPointManifestPlugin', (stats) => {
+						const manifest = {
+							entrypoints: mapChunkGroups(stats.compilation.entrypoints),
+							chunkGroups: mapChunkGroups(stats.compilation.chunkGroups)
+						};
+
+						fs.writeFileSync(path.resolve(DIST, 'entrypoints.json'), JSON.stringify(manifest, null, '\t'));
+					});
+				}
+			},
 			new VueLoaderPlugin()
 		],
 		resolve: {
@@ -102,3 +142,17 @@ module.exports = (env, argv) => {
 		}
 	};
 };
+
+function mapChunkGroups(chunkGroups = {}) {
+	const chunkGroupEntries = (chunkGroups instanceof Map)?Array.from(chunkGroups.entries()):Array.from(chunkGroups).map((chunkGroup) => [chunkGroup.name, chunkGroup]);
+	return Object.fromEntries(
+		chunkGroupEntries
+			.filter(([name]) => name)
+			.map(([name, chunkGroup]) => [
+				name,
+				Array.from((typeof chunkGroup.getFiles === 'function')?chunkGroup.getFiles():chunkGroup.assets)
+					.map((asset) => (typeof asset === 'string')?asset:asset.name)
+					.filter((file) => file.endsWith('.js'))
+			])
+	);
+}