vite打包时解决依赖冲突

阅读数:27 评论数:0

跳转到新版页面

分类

html/css/js

正文

shamefully-hoist=true 是一个在 Vue 3 项目中使用 Vite 时的配置选项。这个选项用于解决某些情况下的依赖冲突问题。

在 Vue 3 项目中,你可以在 vite.config.js 文件中的 optimizeDeps 配置选项中设置 shamefullyHoist 为 true,以启用该选项。

// vite.config.js
export default {
  optimizeDeps: {
    shamefullyHoist: true
  }
}

当设置为 true 时,Vite 会将所有的依赖项 "shamefully hoist"(也就是将所有依赖项提升到顶层),以解决一些依赖冲突的问题。这意味着 Vite 会将所有依赖项放在一个公共的顶层目录中,而不是按照它们在 node_modules 中的嵌套结构排列。

这个选项通常用于解决一些特定的依赖冲突问题,但它可能会导致一些副作用,比如增加构建时的包大小和可能的运行时问题。因此,建议只在遇到真正的依赖冲突问题时才使用该选项,并在使用之前仔细考虑和测试其影响。




相关推荐

一、概述 都是现代化打包工具 二、对比 1、底层语言 从底层原理上来说,Vite是基于esbuild预构建依赖。而esbuild是采用go语言编写,因为go语言的操作是纳秒级别,而js是以毫秒计数,所

一、使用pnpm新建项目 可以使用npm 或yarn或pnpm来初始化Vite项目 pnpm create vite xxx(项目名称) #选择vue #选择js cd xxx (进入项目目录) #安

一、问题描述 vite+vue3项目开发完以后,你会发现打包后的项目运行在新版浏览器可以正常显示,但运行在一些版本比较老的浏览器如 Chrome < 23、Firefox < 21和IE等浏览器上时显

一、概述 sass提供了变量、嵌套、混合、志入等高级功能,强化了css的功能,编写css更便捷,功能更强大。 1、scss文件命名(前下划线) 在 SCSS 文件命名约定中,文件名前的下划线(_)有特

一、概述 官方文档:https://cn.vitejs.dev/config/ 二 共享配置 1. resolve.extensions import HelloWorld from '@/compo

一、build视图分析依赖文件 分析项目中的文件大小及引用情用情况,是优化前的重要一步,从而采取文件分包、cdn引入等相关技术。 Rollup Plugin Visualizer是一个依赖分析插件,它

一、概述 Vite 是一个现代化的前端构建工具,它提供了快速的冷启动、即时模块热更新和真正的按需编译等特性。 二、Vite构建组件项目 1、配置vite.config.js 在你的项目根目录下,确保你

一、概述 VitePress是一个基于Vite和Vue的静态站点生成器,它通常用于编写文档。 二、使用方法 要在 VitePress 中配置组件文档,你需要遵循以下步骤: 1、安装VitePress

方法一、使用new URL 在 Vite 中,你可以使用 new URL 的方式来引用静态资源,这样 Vite 会处理资源的路径,并且在构建时会将资源复制到输出目录: <script setup> c

一、概述 vite-plugin-inspect 是一个用于 Vite 的调试插件,它允许开发者检查 Vite 项目中的内部模块图和插件的输出。这个插件可以帮助你理解 Vite 是如何转换和优化你的代