[🔧] Better bundling

package-lock.json

@@ -12,6 +12,8 @@
         "@ptkdev/logger": "^1.8.0",
         "brace": "^0.11.1",
         "filer": "^1.4.1",
+        "prism-code-editor": "^1.2.2",
+        "prismjs": "^1.29.0",
         "uuid": "^9.0.1"
       },
       "devDependencies": {
@@ -2232,6 +2234,11 @@
         "undici-types": "~5.25.1"
       }
     },
+    "node_modules/@types/prismjs": {
+      "version": "1.26.1",
+      "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.1.tgz",
+      "integrity": "sha512-Q7jDsRbzcNHIQje15CS/piKhu6lMLb9jwjxSfEIi4KcFKXW23GoJMkwQiJ8VObyfx+VmUaDcJxXaWN+cTCjVog=="
+    },
     "node_modules/@types/qs": {
       "version": "6.9.8",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.8.tgz",
@@ -6259,6 +6266,22 @@
         "renderkid": "^3.0.0"
       }
     },
+    "node_modules/prism-code-editor": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/prism-code-editor/-/prism-code-editor-1.2.2.tgz",
+      "integrity": "sha512-jmVlSNCp40BWauhzjv3GGFmXVaZkXcuVa7G/5RWV+iSPAugYfL1gQlOkXxC+E2gd/Z3/wbQIEr5RC1kyoohqlg==",
+      "dependencies": {
+        "@types/prismjs": "^1.26.0"
+      }
+    },
+    "node_modules/prismjs": {
+      "version": "1.29.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+      "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",

package.json

@@ -35,6 +35,8 @@
     "@ptkdev/logger": "^1.8.0",
     "brace": "^0.11.1",
     "filer": "^1.4.1",
+    "prism-code-editor": "^1.2.2",
+    "prismjs": "^1.29.0",
     "uuid": "^9.0.1"
   }
 }

tsconfig.json

@@ -4,8 +4,8 @@
     "outDir": "./dist/",
     "sourceMap": true,
     "noImplicitAny": true,
-    "module": "commonjs",
+    "module": "ES2022",
-    "target": "es6",
+    "target": "ESNext",
     "jsx": "react",
     "jsxFactory": "h",
     "allowJs": true,

webpack.config.js

@@ -1,6 +1,7 @@
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { FilerWebpackPlugin } = require('filer/webpack');
 const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
+const webpack = require('webpack');
 
 const path = require('path');
 
@@ -53,6 +54,7 @@ module.exports = {
   output: {
     filename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist'),
+    clean: true,
   },
   devServer: {
     static: {
@@ -64,6 +66,36 @@ module.exports = {
   plugins: [new HtmlWebpackPlugin(), new FilerWebpackPlugin(),
     new NodePolyfillPlugin({
       excludeAliases: ['console']
+    }),
+    new webpack.optimize.MinChunkSizePlugin({
+      minChunkSize: 50000, // Minimum number of characters
+    }),
+    new webpack.optimize.SplitChunksPlugin({
+      minSize: 45000,
+      maxSize: 110000
     })
   ],
+  optimization: {
+    splitChunks: {
+      chunks: 'async',
+      minSize: 20000,
+      minRemainingSize: 0,
+      minChunks: 1,
+      maxAsyncRequests: 30,
+      maxInitialRequests: 30,
+      enforceSizeThreshold: 50000,
+      cacheGroups: {
+        commons: {
+          test: /[\\/]node_modules[\\/]/,
+          name: "vendor",
+          chunks: "initial",
+          reuseExistingChunk: true,
+        },
+        default: {
+          minChunks: 2,
+          reuseExistingChunk: true,
+        },
+      },
+    },
+  },
 };