fix: improve chunking

slidevjs · Feb 27, 2024 · b37665d · b37665d
1 parent af6e9b4
commit b37665d
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 12 deletions.
diff --git a/packages/client/builtin/Monaco.vue b/packages/client/builtin/Monaco.vue
@@ -12,11 +12,10 @@ Learn more: https://sli.dev/guide/syntax.html#monaco-editor
 -->
 
 <script setup lang="ts">
-import * as monaco from 'monaco-editor'
+import type * as monaco from 'monaco-editor'
 import { computed, nextTick, onMounted, ref } from 'vue'
 import { debounce } from '@antfu/utils'
 import lz from 'lz-string'
-import setup from '../setup/monaco'
 import { makeId } from '../logic/utils'
 
 const props = withDefaults(defineProps<{
@@ -67,7 +66,9 @@ const height = computed(() => {
 })
 
 onMounted(async () => {
-  const { ata } = await setup()
+  // Lazy load monaco, so it will be bundled in async chunk
+  const { default: setup } = await import('../setup/monaco')
+  const { ata, monaco } = await setup()
   const model = monaco.editor.createModel(code, lang, monaco.Uri.parse(`file:///${makeId()}.${ext}`))
   const commonOptions = {
     automaticLayout: true,

diff --git a/packages/client/setup/monaco.ts b/packages/client/setup/monaco.ts
@@ -24,7 +24,6 @@ import { isDark } from '../logic/dark'
 import configs from '#slidev/configs'
 
 /* __imports__ */
-
 window.MonacoEnvironment = {
   getWorker(_, label) {
     if (label === 'json')

diff --git a/packages/slidev/node/plugins/extendConfig.ts b/packages/slidev/node/plugins/extendConfig.ts
@@ -70,19 +70,19 @@ export function createConfigPlugin(options: ResolvedSlidevOptions): Plugin {
           rollupOptions: {
             output: {
               chunkFileNames(chunkInfo) {
-                const DEFAULT = '[name]-[hash].js'
+                const DEFAULT = 'assets/[name]-[hash].js'
 
                 // Already handled in manualChunks
-                if (chunkInfo.name.includes('/') || chunkInfo.name === 'entry')
+                if (chunkInfo.name.includes('/'))
                   return DEFAULT
 
                 // Over 60% of the chunk is slidev client code, we put it into slidev chunk
                 if (chunkInfo.moduleIds.filter(i => isSlidevClient(i)).length > chunkInfo.moduleIds.length * 0.6)
-                  return 'slidev/[name]-[hash].js'
+                  return 'assets/slidev/[name]-[hash].js'
 
                 // Monaco Editor
-                if (chunkInfo.moduleIds.filter(i => i.includes('/monaco-editor/')).length > chunkInfo.moduleIds.length * 0.6)
-                  return 'monaco/[name]-[hash].js'
+                if (chunkInfo.moduleIds.filter(i => i.match(/\/monaco-editor(-core)?\//)).length > chunkInfo.moduleIds.length * 0.6)
+                  return 'assets/monaco/[name]-[hash].js'
 
                 return DEFAULT
               },
@@ -93,9 +93,6 @@ export function createConfigPlugin(options: ResolvedSlidevOptions): Plugin {
                   return `modules/shiki`
                 if (id.startsWith('~icons/'))
                   return 'modules/unplugin-icons'
-                if (id.includes('/client/main.ts'))
-                  return 'entry'
-
                 // It seems that moving slides out will breaks the production build
                 // Would need to find a better way to handle this
                 // const slideMatch = id.match(/\/@slidev\/slides\/(\d+)/)