VitePress项目工程化应该如何做

VitePress现在的打包情况

javascript 复制代码

大小：182 MB (191,462,612 字节)
占用：185 MB (194,637,824 字节)
文件夹：2,033 个文件，99 个文件夹

//打包时间
build complete in 126.90s.
Done in 127.45s.

VitePress 默认使用 Vite 作为构建工具，所以我们可以通过 config.mts 文件来优化打包大小

👉Terser 压缩

🍎Terser 的作用和用法

Terser 是 JavaScript 的一个压缩工具，主要用于减小文件体积。可以看做是 UglifyJS 的一个现代化替代品，并且支持 ES6+ 语法。

作用包括：

压缩代码：去除多余的空格、注释、换行符等，减小文件大小。
重命名变量和函数：将变量和函数名缩短成单个字母，从而进一步减小代码体积。
删除未使用的代码：通过静态分析，移除未使用的代码。
移除调试代码 ：删除 console.log、debugger 等调试语句

🍎在 VitePress 中使用 Terser

需要注意的是其实vitepress已经默认使用了Terser

如果我们使用的是 Vite，Terser 会默认作为压缩工具被使用

config.mts 配置

javascript 复制代码

import { defineConfig } from 'vitepress'

export default defineConfig({
  vite: {
    build: {
      minify: 'terser',  // 使用 Terser 压缩
      terserOptions: {
        compress: {
          drop_console: true,  // 删除所有 console.log
          drop_debugger: true, // 删除所有 debugger 语句
        },
        output: {
          comments: false, // 去除注释
        },
      },
    },
  },
})

🍎terser属性

👉🏼**toplevel**属性

用于优化代码的顶层结构。启用后，它会尝试将代码中不必要的结构提取到更高的作用域中进行优化。

javascript 复制代码

terserOptions: {
  compress: {
    toplevel: true,  // 优化顶层作用域
  },
}

👉🏼mangle

对变量和函数名进行缩短，可以进一步减小文件体积。

默认情况下，Terser 会自动进行变量名和函数名缩短（例如将 myFunction 改成 a）。
如果你希望禁用这个功能，可以将 mangle 设置为 false

javascript 复制代码

terserOptions: {
  mangle: true, // 启用名称压缩
}

👉🏼**keep_fnames**属性

默认情况下，Terser 会压缩函数名。如果你希望保留函数名（例如在调试过程中需要），可以设置为 true

javascript 复制代码

terserOptions: {
  compress: {
    keep_fnames: true,  // 保留函数名
  },
}

👉🏼comments属性

**comments: true**：保留注释。
**comments: false**：去除所有注释，包括版权声明等。
**comments: /some-regex/**：你也可以通过正则表达式来指定哪些注释需要保留，其他的会被去除。

例如，comments: /^!/ 可以保留以 ! 开头的注释

javascript 复制代码

build: {
  minify: 'terser',  // 启用 Terser 压缩
  terserOptions: {
    output: {
      comments: false, // 去除注释
    },
  },
},

🍎打包情况

几乎没有变化，因为我们项目中的输出之类的非常少，并且默认采用的也是Terser

javascript 复制代码

大小：182 MB (191,432,315 字节)
占用：185 MB (194,445,312 字节)
文件夹：2,033个文件，99个文件夹


//打包时间
build complete in 112.21s.
Done in 113.03s.

👉css优化

javascript 复制代码

build: {
  cssMinify: true,  // 启用 CSS 压缩
  cssCodeSplit: true,  // 启用 CSS 分离
},

👉vitepresss优化

🍎启用元数据分块（Meta Chunk）--无属性

metaChunk

在配置中添加 metaChunk: true，将侧边栏等元数据从 HTML 中分离为独立文件，避免重复内联导致的冗余：

javascript 复制代码

// .vitepress/config.js
export default {
  build: {
    metaChunk: true // 减少 HTML 体积，提升缓存利用率:cite[1]:cite[2]:cite[3]
  }
}

🍎图片懒加载

javascript 复制代码

export default defineConfig({
  // 对 markdown 的配置
  markdown: {
    // 启用懒加载
    image: {
      lazyLoading: true  // 所有图片自动懒加载
    }
}

🍎组件按需加载 (无需额外文件)

javascript 复制代码

<!-- 直接在使用页面的 .md 文件中添加 -->
<script setup>
import { defineAsyncComponent } from 'vue'

const HeavyChart = defineAsyncComponent(() =>
  import('../components/Chart.vue')
)
</script>

<template>
  <HeavyChart />
</template>

🍎构建分析 (诊断依赖大小)

**rollup-plugin-visualizer**插件

javascript 复制代码

# 安装分析插件
npm install rollup-plugin-visualizer

# 临时添加到配置
// config.mts
import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig({
  vite: {
    plugins: [visualizer()],
    build: {
      rollupOptions: {
        output: {
          manualChunks: { /* 原有配置 */ }
        }
      }
    }
  }
})

🍎分割代码

javascript 复制代码

 manualChunks: (id) => {
   // 1. 分离搜索索引文件
  if (id.includes('localSearchIndex')) {
    return 'search-index'
  }
  // 4. 分离主题组件
  if (id.includes('.vitepress/theme')) {
    return 'theme-components'
  } 
}

🍎其他

javascript 复制代码

// 2. 禁用未使用功能 (加速构建)
transformPageData: null,  // 若无自定义页面数据处理
appearance: false,        // 禁用暗黑模式切换（若不需要）