build(applet+client): reduce bundle size (#527)

Author: alexzhang1030

packages/applet/src/index.ts

@@ -1,7 +1,7 @@
 import 'uno.css'
 import '@unocss/reset/tailwind.css'
 import './styles/base.css'
-import 'floating-vue/dist/style.css'
+import '@vue/devtools-ui/style.css'
 
 export * from './modules/pinia'
 export * from './modules/components'

packages/applet/src/modules/components/components/RenderCode.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import CodeBlock from '~/components/basic/CodeBlock.vue'
+import { VueCodeBlock } from '@vue/devtools-ui'
 
 defineProps<{
   code: string
@@ -19,7 +19,7 @@ function close() {
       <i class="i-carbon-close cursor-pointer hover:op80" @click="close" />
     </div>
     <div class="flex-1 overflow-scroll text-3.5">
-      <CodeBlock :code="code" lang="javascript" />
+      <VueCodeBlock :code="code" lang="javascript" />
     </div>
   </div>
 </template>

packages/applet/vite.config.ts

@@ -2,6 +2,7 @@ import { resolve } from 'node:path'
 import Vue from '@vitejs/plugin-vue'
 import Unocss from 'unocss/vite'
 import Dts from 'vite-plugin-dts'
+import { dependencies, peerDependencies } from './package.json'
 
 const argv = process.argv.slice(2)
 const enableWatch = argv.includes('--watch')
@@ -26,7 +27,7 @@ export default {
       formats: ['es', 'cjs'],
     },
     rollupOptions: {
-      external: ['vue'],
+      external: [...Object.keys(peerDependencies), ...Object.keys(dependencies)],
       output: {
         assetFileNames: 'index.[ext]',
         globals: {

packages/client/src/components/code/CodeBlock.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { BuiltinLanguage } from 'shiki'
 import type { CodeSnippet } from '@vue/devtools-core'
-import { VueButton } from '@vue/devtools-ui'
+import { VueButton, VueCodeBlock } from '@vue/devtools-ui'
 
 const props = defineProps<{
   codeSnippets: CodeSnippet[]
@@ -38,7 +38,7 @@ watchEffect(() => {
     </div>
 
     <template v-if="selected">
-      <CodeBlock
+      <VueCodeBlock
         :code="selected.code"
         :lang="selectedLang"
         :lines="false"

packages/client/src/components/code/CodeSnippets.vue

@@ -1,7 +1,8 @@
 import '@unocss/reset/tailwind.css'
-import 'floating-vue/dist/style.css'
-import { getViteClient } from 'vite-hot-client'
+import 'uno.css'
+import '@vue/devtools-ui/style.css'
 
+import { getViteClient } from 'vite-hot-client'
 import { isInChromePanel, isInSeparateWindow } from '@vue/devtools-shared'
 import { VueDevToolsVuePlugin, createViteClientRpc, functions, rpc } from '@vue/devtools-core'
 import { createRpcClient, setViteClientContext } from '@vue/devtools-kit'
@@ -22,7 +23,6 @@ import CustomTabView from '~/pages/custom-tab-view.vue'
 import CustomInspectorTabView from '~/pages/custom-inspector-tab-view.vue'
 import WaitForConnection from '~/components/WaitForConnection.vue'
 
-import 'uno.css'
 import '~/assets/styles/main.css'
 
 const routes = [

packages/client/src/composables/shiki.ts

@@ -11,6 +11,7 @@
       "require": "./dist/index.cjs"
     },
     "./style.css": "./dist/style.css",
+    "./uno.css": "./dist/uno.css",
     "./theme": {
       "types": "./dist/types/theme/index.d.ts",
       "import": "./dist/theme.js",
@@ -32,6 +33,7 @@
   "peerDependencies": {
     "@unocss/reset": ">=0.50.0-0",
     "floating-vue": ">=2.0.0-0",
+    "shiki": ">=1.10.0",
     "unocss": ">=0.50.0-0",
     "vue": ">=3.0.0-0"
   },

packages/client/src/main.ts

@@ -2,15 +2,17 @@
 // This components requires to run in DevTools to render correctly
 import { computed, nextTick } from 'vue'
 import type { BuiltinLanguage } from 'shiki'
-import { renderCodeHighlight } from '~/composables/shiki'
+import { renderCodeHighlight } from '../composables/shiki'
+
+export interface VueCodeBlockProps {
+  code: string
+  lang?: BuiltinLanguage | 'text'
+  lines?: boolean
+  transformRendered?: (code: string) => string
+}
 
 const props = withDefaults(
-  defineProps<{
-    code: string
-    lang?: BuiltinLanguage | 'text'
-    lines?: boolean
-    transformRendered?: (code: string) => string
-  }>(),
+  defineProps<VueCodeBlockProps>(),
   {
     lines: true,
   },
@@ -46,22 +48,31 @@ const rendered = computed(() => {
   </template>
 </template>
 
-<style>
-.code-block-lines .shiki code {
-  counter-reset: step;
-  counter-increment: step calc(var(--start, 1) - 1);
-}
-.code-block-lines .shiki code .line::before {
-  content: counter(step);
-  counter-increment: step;
-  width: 2.5rem;
-  padding-right: 0.5rem;
-  margin-right: 0.5rem;
-  display: inline-block;
-  text-align: right;
-  --at-apply: 'text-truegray:50';
-}
-.code-block pre:focus-visible {
-  outline: none;
+<style lang="postcss">
+.code-block-lines {
+  .shiki {
+    code {
+      counter-reset: step;
+      counter-increment: step calc(var(--start, 1) - 1);
+
+      .line {
+        &::before {
+          content: counter(step);
+          counter-increment: step;
+          width: 2.5rem;
+          padding-right: 0.5rem;
+          margin-right: 0.5rem;
+          display: inline-block;
+          text-align: right;
+          --at-apply: 'text-truegray:50';
+        }
+      }
+    }
+  }
+  pre {
+    &:focus-visible {
+      outline: none;
+    }
+  }
 }
 </style>

packages/ui/package.json

@@ -18,6 +18,7 @@ import Overlay from './Overlay.vue'
 import Notification from './Notification.vue'
 import Tooltip from './Tooltip.vue'
 import IcIcon from './IcIcon.vue'
+import CodeBlock from './CodeBlock.vue'
 
 export {
   Badge as VueBadge,
@@ -40,6 +41,7 @@ export {
   Notification as VueNotification,
   Tooltip as VueTooltip,
   IcIcon as VueIcIcon,
+  CodeBlock as VueCodeBlock,
 }
 
 export type * from './Button.vue'
@@ -61,3 +63,5 @@ export type * from './Drawer.vue'
 export type * from './Overlay.vue'
 export type * from './Notification.vue'
 export type * from './Tooltip.vue'
+export type * from './IcIcon.vue'
+export type * from './CodeBlock.vue'

packages/applet/src/components/basic/CodeBlock.vue renamed to packages/ui/src/components/CodeBlock.vue

@@ -5,6 +5,7 @@ import '@unocss/reset/tailwind.css'
 import 'uno.css'
 
 import { vTooltip } from 'floating-vue'
+import 'floating-vue/dist/style.css'
 
 export * from './components'
 export * from './composables'

packages/ui/src/components/index.ts

@@ -7,6 +7,7 @@ import vue from '@vitejs/plugin-vue'
 import { HstVue } from '@histoire/plugin-vue'
 import unocss from 'unocss/vite'
 import dts from 'vite-plugin-dts'
+import { dependencies, peerDependencies } from './package.json'
 
 const IcIconDataPath = path.resolve(__dirname, './src/constants/ic-icons.ts')
 
@@ -32,13 +33,33 @@ export default defineConfig({
     },
   ],
   build: {
+    cssCodeSplit: true,
     rollupOptions: {
-      external: ['vue', 'unocss', 'floating-vue'],
+      external: [
+        ...Object.keys(peerDependencies),
+        ...Object.keys(dependencies),
+        /^shiki/,
+      ],
       output: {
         globals: {
           vue: 'Vue',
         },
+        /**
+         * 1. unocss css snippets is optional
+         * 2. vue sfc scoped css + node_modules css is necessary to be in the same chunk that imported by client
+         */
         manualChunks(id) {
+          // css #1
+          if (id.includes('uno.css') || id.includes('@unocss/reset')) {
+            return 'uno'
+          }
+          // css #2
+          if ((id.includes('.vue') && id.includes('type=style'))
+            || (id.includes('node_modules') && id.endsWith('.css'))) {
+            return 'style'
+          }
+
+          // js code splitting
           if (id.includes('node_modules')) {
             return 'vendor'
           }