Pure Admin 保姆级文档(已更新至最新版v6.0.0)
  • 介绍
  • 快速开始
  • 目录结构
  • vscode文件夹详解
  • 平台配置
  • 布局
  • 路由和菜单
  • http请求
  • 打包和部署
  • 进阶

    • 图标
    • 主题和暗黑模式
    • 国际化
    • Tailwind CSS
    • RBAC权限
    • 类型声明
    • 单点登录
    • 自定义免登录
    • 打包优化
    • vite预构建
  • 生态

    • 对接平台的前后端项目
    • 函数工具库
    • 组件库
    • vite插件
  • 其他

    • 赞助
    • 常见问题
    • 非平台问题跟踪记录
    • git常用命令
    • 技术网站推荐
  • 赞助
    • 后端项目
    • 哔哩哔哩 (opens new window)
  • 日志

    • Github日志 (opens new window)
    • Gitee日志 (opens new window)
  • 预览

    • 完整版 (opens new window)
    • 精简版 (opens new window)
    • max版 (opens new window)
    • utils文档 (opens new window)
  • Github源码

    • 完整版 (opens new window)
    • 精简版 (opens new window)
    • Tauri版 (opens new window)
    • Electron版 (opens new window)
    • 配套后端 (opens new window)
    • 文档 (opens new window)
    • utils文档 (opens new window)
  • Gitee源码

    • 完整版 (opens new window)
    • 精简版 (opens new window)
    • Tauri版 (opens new window)
    • Electron版 (opens new window)
    • 配套后端 (opens new window)
    • 文档 (opens new window)
    • utils文档 (opens new window)
优质服务
JS版本
Max版本
JS版本、Max版本限时活动
  • 介绍
  • 快速开始
  • 目录结构
  • vscode文件夹详解
  • 平台配置
  • 布局
  • 路由和菜单
  • http请求
  • 打包和部署
  • 进阶

    • 图标
    • 主题和暗黑模式
    • 国际化
    • Tailwind CSS
    • RBAC权限
    • 类型声明
    • 单点登录
    • 自定义免登录
    • 打包优化
    • vite预构建
  • 生态

    • 对接平台的前后端项目
    • 函数工具库
    • 组件库
    • vite插件
  • 其他

    • 赞助
    • 常见问题
    • 非平台问题跟踪记录
    • git常用命令
    • 技术网站推荐
  • 赞助
    • 后端项目
    • 哔哩哔哩 (opens new window)
  • 日志

    • Github日志 (opens new window)
    • Gitee日志 (opens new window)
  • 预览

    • 完整版 (opens new window)
    • 精简版 (opens new window)
    • max版 (opens new window)
    • utils文档 (opens new window)
  • Github源码

    • 完整版 (opens new window)
    • 精简版 (opens new window)
    • Tauri版 (opens new window)
    • Electron版 (opens new window)
    • 配套后端 (opens new window)
    • 文档 (opens new window)
    • utils文档 (opens new window)
  • Gitee源码

    • 完整版 (opens new window)
    • 精简版 (opens new window)
    • Tauri版 (opens new window)
    • Electron版 (opens new window)
    • 配套后端 (opens new window)
    • 文档 (opens new window)
    • utils文档 (opens new window)
优质服务
JS版本
Max版本
  • 指南

    • 介绍
    • 快速开始
    • 目录结构
    • .vscode文件夹详解
    • 平台配置
    • 布局
    • 路由和菜单
    • http请求
    • 打包和部署
  • 进阶

    • 图标(有新的更新)
    • 主题和暗黑模式
    • 国际化
    • Tailwind CSS(有新的更新)
    • RBAC权限
    • 类型声明
    • 单点登录
    • 自定义免登录
    • 打包优化
    • vite预构建
      • include
      • exclude
  • 生态

    • 对接平台的前后端项目
    • 函数工具库
    • 组件库
    • vite插件
  • 其他

    • 赞助
    • 常见问题
    • 非平台问题跟踪记录
    • git常用命令
    • 技术网站推荐
目录

vite预构建

主要介绍下如何在 pure-admin 平台进行正确有效的 vite 预构建配置

# include

optimizeDeps.include (opens new window) 配置为需要预构建的模块。vite 启动时会将 optimizeDeps.include 里的模块,编译成 esm 格式并缓存到 node_modules/.vite 文件夹,页面加载到对应模块时如果浏览器有缓存就读取浏览器缓存,如果没有会读取本地缓存并按需加载

img

下面是精简版 optimizeDeps.include 配置,将 dependencies (opens new window) 大部分未全局安装的模块都配置进来,当然如果模块里面的东西很少,也就是里面方法不多,可以不用配置进来直接让浏览器加载即可(您自己安装的模块也是参考该配置)

点击查看
const include = [
  "qs",
  "mitt",
  "dayjs",
  "axios",
  "pinia",
  "vue-types",
  "js-cookie",
  "vue-tippy",
  "pinyin-pro",
  "sortablejs",
  "@vueuse/core",
  "@pureadmin/utils",
  "responsive-storage",
];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

提示

  1. 尤其当您禁用浏览器缓存时(这种情况只应该发生在调试阶段)必须将对应模块加入到 include 里,否则会遇到开发环境切换页面卡顿的问题(vite 会认为它是一个新的依赖包会重新加载并强制刷新页面),因为它既无法使用浏览器缓存,又没有在本地 node_modules/.vite 里缓存
  2. 如果您使用的第三方库是全局引入,也就是引入到 src/main.ts 文件里,就不需要再添加到 include 里了,因为 vite 会自动将它们缓存到 node_modules/.vite

# exclude

optimizeDeps.exclude (opens new window) 配置为排除预构建的模块。平台推荐的使用方式是哪里需要哪里引入而且都是单个的引入,不需要预构建,直接让浏览器加载就好

下面是精简版 optimizeDeps.exclude 配置

点击查看
const exclude = ["@iconify/json"];
1

推荐阅读

  • 依赖预构建 (opens new window) vite文档
  • 深入理解 Vite 核心原理 (opens new window)
上次更新: 2025/05/09, 02:23:01
打包优化
对接平台的前后端项目

← 打包优化 对接平台的前后端项目→

最近更新
更多文章>
starsstars18k18k
forksforks3.4k3.4k
Theme by Vdoing | Copyright © 2020-2025 pure-admin | MIT License