vite的依赖预构建

最新推荐文章于 2026-04-01 02:06:38 发布

原创最新推荐文章于 2026-04-01 02:06:38 发布 · 1.4k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端

Vite的依赖预构建功能会在启动时将项目依赖转为浏览器可识别的格式，提高运行速度。例如，当引入lodash-es并使用后，Vite会生成预构建文件，减少HTTP请求。如果在配置中排除预构建，如lodash-es，会导致更多网络请求，影响性能。只有在实际使用依赖时，Vite才会进行预构建。

一，什么是vite依赖预构建

依赖预构建是指 Vite 在启动时会对项目中的依赖进行分析并将其预构建成浏览器可识别的形式。这样在浏览器中加载组件时就无需再进行模块的编译和构建，大大提高了应用程序的运行速度。

二，依赖预构建的目的

CommonJS 和 UMD 兼容性: 在开发阶段中，Vite 的开发服务器将所有代码视为原生 ES 模块。因此，Vite 必须先将以 CommonJS 或 UMD 形式提供的依赖项转换为 ES 模块。
性能： 为了提高后续页面的加载性能，Vite将那些具有许多内部模块的 ESM 依赖项转换为单个模块。

vite 官网依赖预构建

三，实战

3.1 安装 lodash-es

npm i lodash-es

3.2 在组件中引入

<script setup lang="ts">
    import lodash from 'lodash-es'
    lodash.get({a:3},'a')
</script>

3.3 此时我们启动vite

npm run dev

我们会发现，在 node_modules中。.vite/deps，目录下会产生lodash-es预构建的产物。

然后我们打开浏览器，发现只有一个http请求。

没预构建的是什么样的？

在vite.config.ts中强制排除lodash-es的预构建

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  base:'./',
  optimizeDeps:{
    exclude:['lodash-es'] //在预构建中强制排除某依赖项
  }
})

然后我们启动vite来查看一下效果。

npm run dev

.vite/deps，此时我们会发现目录下不会产生lodash-es预构建的产物了

再打开浏览器,我们会发现，使用loadsh会产生600多个请求。

注意：

如果我们只是引入,vite不会预构建lodash-es

 import lodash from 'lodash-es'

只有我们使用了如下所示，vite才会预构建

<script setup lang="ts">
    import lodash from 'lodash-es'
    lodash.get({a:3},'a')
</script>