vite打包时解决依赖冲突
阅读数:110 评论数: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 是如何转换和优化你的代