Improve build size

Author: zxdong262

build/vite/conf.js

@@ -2,11 +2,103 @@ import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 // import htmlPurge from 'vite-plugin-purgecss'
 import { cwd, version } from './common.js'
-import { resolve } from 'path'
+import { resolve, join } from 'path'
 import def from './def.js'
 import commonjs from 'vite-plugin-commonjs'
+import {
+  readdirSync,
+  statSync
+} from 'fs'
+import { filesize } from 'filesize'
 // import externalGlobals from 'rollup-plugin-external-globals'
 
+function getDirSize (dirPath) {
+  let size = 0
+  const files = readdirSync(dirPath, { withFileTypes: true })
+  for (const file of files) {
+    const fullPath = join(dirPath, file.name)
+    if (file.isDirectory()) {
+      size += getDirSize(fullPath)
+    } else {
+      size += statSync(fullPath).size
+    }
+  }
+  return size
+}
+
+function showTotalSizePlugin () {
+  return {
+    name: 'show-total-size',
+    closeBundle: {
+      sequential: true,
+      order: 'post',
+      handler () {
+        const outDir = resolve(cwd, 'public')
+        try {
+          const totalSize = getDirSize(outDir)
+          console.log(`\n\x1b[32m✨ Total assets size: ${filesize(totalSize)}\x1b[0m\n`)
+        } catch (e) {
+          console.error(e)
+        }
+      }
+    }
+  }
+}
+
+const manualChunks = (id) => {
+  if (id.includes('node_modules')) {
+    if (id.match(/node_modules\/(react|react-dom|scheduler)\//) ||
+      id.includes('object-assign') ||
+      id.includes('loose-envify')) {
+      return 'react-vendor'
+    }
+    if (
+      id.includes('react-delta-hooks') ||
+      id.includes('react-markdown')
+    ) {
+      return 'react-utils'
+    }
+    if (id.includes('lodash-es')) {
+      return 'lodash-es'
+    }
+    if (id.includes('dayjs')) {
+      return 'dayjs'
+    }
+    if (id.includes('@ant-design/icons')) {
+      return 'ant-icons'
+    }
+    if (id.includes('@ant-design') || id.includes('@rc-component') || id.includes('classnames') || id.includes('@ctrl/tinycolor')) {
+      return 'react-vendor'
+    }
+    if (id.includes('antd')) {
+      return 'antd'
+    }
+    if (id.includes('@xterm')) {
+      return 'xterm'
+    }
+    if (id.includes('manate')) {
+      return 'manate'
+    }
+    if (id.includes('zmodem-ts')) {
+      return 'zmodem-ts'
+    }
+    if (id.includes('electerm-icons')) {
+      return 'electerm-icons'
+    }
+    if (id.includes('@novnc/novnc')) {
+      return 'novnc'
+    }
+    if (id.includes('ironrdp-wasm')) {
+      return 'ironrdp-wasm'
+    }
+    if (id.includes('spice-client')) {
+      return 'spice'
+    }
+    // Combine rest of node_modules into one chunk
+    return 'vendor'
+  }
+}
+
 function buildInput () {
   return {
     electerm: resolve(cwd, 'src/client/entry-web/electerm.jsx'),
@@ -24,7 +116,8 @@ export default defineConfig({
     //   react: 'React',
     //   'react-dom': 'ReactDOM'
     // }),
-    react({ include: /\.(mdx|js|jsx|ts|tsx|mjs)$/ })
+    react({ include: /\.(mdx|js|jsx|ts|tsx|mjs)$/ }),
+    showTotalSizePlugin()
   ],
   // optimizeDeps: {
   //   esbuildOptions: {
@@ -49,46 +142,7 @@ export default defineConfig({
       //   'react-dom'
       // ],
       output: {
-        manualChunks: {
-          react: ['react-dom'],
-          'lodash-es': ['lodash-es'],
-          dayjs: ['dayjs'],
-          antd1: [
-            '@ant-design/colors',
-            '@ant-design/cssinjs',
-            '@ant-design/react-slick',
-            '@ctrl/tinycolor',
-            'classnames',
-            '@rc-component/color-picker',
-            '@rc-component/mutate-observer',
-            '@rc-component/tour',
-            '@rc-component/trigger',
-            'scroll-into-view-if-needed',
-            'throttle-debounce'
-          ],
-          antd: ['antd'],
-          '@ant-design/icons': ['@ant-design/icons'],
-          xterm: [
-            '@xterm/xterm'
-          ],
-          'xterm-addon1': [
-            '@xterm/addon-attach',
-            '@xterm/addon-canvas',
-            '@xterm/addon-fit',
-            '@xterm/addon-ligatures'
-          ],
-          'xterm-addon2': [
-            '@xterm/addon-search',
-            '@xterm/addon-unicode11',
-            '@xterm/addon-web-links',
-            '@xterm/addon-webgl'
-          ],
-          '@electerm/electerm-themes': ['@electerm/electerm-themes'],
-          manate: ['manate'],
-          'spice-client': ['spice-client'],
-          'electerm-icons': ['electerm-icons'],
-          'react-utils': ['react', 'react-colorful', 'react-delta-hooks']
-        },
+        manualChunks,
         inlineDynamicImports: false,
         format: 'esm',
         entryFileNames: `js/[name]-${version}.js`,
@@ -105,6 +159,10 @@ export default defineConfig({
   },
   resolve: {
     alias: {
+      '@xterm/addon-image': resolve(fakePath, 'xterm-addon.js'),
+      '@xterm/addon-ligatures': resolve(fakePath, 'xterm-addon.js'),
+      // '@xterm/addon-unicode11': resolve(fakePath, 'xterm-addon.js'),
+      '@xterm/addon-webgl': resolve(fakePath, 'xterm-addon.js'),
       'react-markdown': resolve(fakePath, 'react-markdown.jsx'),
       '@novnc/novnc/core/rfb.js': resolve(fakePath, 'novnc.js'),
       'zmodem-ts/dist/zsentry.js': resolve(fakePath, 'zmodem.js'),

build/vite/fake-libs/xterm-addon.js

@@ -0,0 +1,19 @@
+export class FitAddon { activate () {} dispose () {} }
+export class AttachAddon { activate () {} dispose () {} }
+export class WebLinksAddon { activate () {} dispose () {} }
+export class CanvasAddon { activate () {} dispose () {} }
+export class WebglAddon { activate () {} dispose () {} }
+export class SearchAddon { activate () {} dispose () {} }
+export class LigaturesAddon { activate () {} dispose () {} }
+export class Unicode11Addon {
+  activate (t) {
+    t.unicode.register({
+      version: '11',
+      wcwidth: () => 1,
+      charProperties: () => 1
+    })
+  }
+
+  dispose () {}
+}
+export class ImageAddon { activate () {} dispose () {} }

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "electerm-web-demo",
-  "version": "3.11.6",
+  "version": "3.13.6",
   "description": "Running electerm in as web app",
   "main": "src/app/app.js",
   "type": "module",
@@ -48,7 +48,7 @@
     "@ant-design/icons": "6.1.0",
     "@ctrl/tinycolor": "^4.1.0",
     "@electerm/electerm-locales": "2.1.64",
-    "@electerm/electerm-react": "2.11.6",
+    "@electerm/electerm-react": "2.13.6",
     "@electerm/electerm-resource": "1.3.7",
     "@electerm/electerm-themes": "^1.0.1",
     "@electerm/strip-ansi": "^1.0.0",