石小石Orz的博客

前端开发过程中，离不开浏览器。但浏览器而一个企业级项目的组成，远远不止这三种。

Vite的依赖预加载机制及其依赖预构建优点

vite脚手架和vite的区别

vite在多环境下的配置集成方案及defineConfig

vite中环境变量使用与配置（全网最全）

webpack中，我们需要在项目中安装css-loader才能让webpack识别css文件。vue-cli基于webpack，内置了这个loaderVite天生就是支持对CSS文件的直接处理的。我们在项目根目录里创建好index.html、main.js、index.css然后安装viteindex.html中我们引入main.jsmain.js中我们引入index.css然后，index.css中我们加个全局背景使用vite启动项目，可以发现不用安装任何插件就可以识别.css文件。

如果我们采用诸如webpack或vite的构建工具开发项目，一定对这个单词比较熟悉。即源代码映射，开启后，即使在开发环境也可以映射出源代码的位置。在vite项目中，css也有与之类似的属性。

通过上一章节，我们学习了vite中如何对css行为进行配置，同时知道了它的第一个配置项css.modules。传送门：https://juejin.cn/post/7175366648659411000现在，我们来深入学习它的第二个可配置项-预处理器配置项。顾名思义，这个选项是用来配置less、scss、stylus等预处理器的。现在我们通过配置less默认选项，详细了解一下preprocessorOptions的配置用法。

有些情况下我们可能希望精确控制需要支持的浏览器范围，这可以通过> 0.5%not deadPostCSS 插件（如或preset-env）会自动读取该配置。自动前缀兼容各大浏览器使用现代 CSS 特性而不用担心兼容性与 CSS Modules、Less 等配合使用，提升开发体验。

vite对静态资源文件的处理

场景推荐方法静态图片相对路径或import引入动态生成路径的图片new URL动态拼接路径批量动态导入目录中的图片使用延迟加载图片配合懒加载库通过灵活应用这些方法，可以让我们的 Vue3 + Vite 项目图片管理更加高效、灵活！关注我，我是石小石！

代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕过浏览器的跨域限制。比如前端发起请求：http://localhost:5173/api/user通过proxy转发代理，最后的实际请求如下：注意：浏览器控制台的请求依旧是，但后端接受的。

TS 是JS的一个类型，检查我们代码中可能会存在的一些隐形问题；同时可以使我们的编译器具备一些功能。如果我们使用（vue3官方脚手架工具）创建了项目，该项目基于且 TypeScript 已经准备就绪，可以直接进行TS开发。本篇文章，我们讨论的是，任意一个安装项目中（不使用脚手架），对TS的支持情况。

问题分包前分包后缓存利用改动业务逻辑也会导致全部 JS 文件重新加载第三方库单独打包，可长期缓存构建输出一个大文件多个按功能分离的 JS chunk网络性能浪费带宽与加载时间加速页面加载，提升体验。

什么是gzip 压缩在构建现代 Web 应用时，页面加载速度始终是用户体验优化的重要环节。而资源体积过大会直接影响加载时间。是一种常见的前端性能优化手段，能够显著减小资源体积，降低网络传输成本。什么是gzip 压缩即使使用了构建工具（如 Webpack 或 Vite）进行优化，打包后的资源体积仍可能较大，尤其包含大量第三方依赖时，这会显著影响网页的首屏加载速度。是一种常用的文本压缩格式，能在浏览器与服务器之间传输资源时显著减小体积，浏览器可自动解压并解析。如果浏览器的请求头中包含**c**