Vite打包优化

1. 分包策略分包策略就是将不会经常更新的文件进行单独打包处理,使客户端加载资源更快。首先说一下浏览器的缓存特性:第一次访问网站时,浏览器首先向服务器发起HTTP请求 ,服务器响应该请求,浏览器第一次拿到结果后,会根据响应头的缓存标识,决定是否缓存,是则将请求结果和缓存标识存入浏览器缓存中。缓存规则

Vite对静态资源的处理

1. 对图片的处理如果你用下面的代码导入图片:import img from './src/assets/images/1.png'console.log(img); // ./src/assets/images/1.png就会得到图片的相对路径。这是因为vite默认把导入图片转换为图片

Vite对CSS的处理

vite自带对css的直接处理,他的大概处理方法如下:import './a.css'; // 比如这样直接引入了一个css文件。通过Node的fs模块读取css文件,并创建一个<style></style>标签,把css文件写入标签。将写入完成的标签插入到html的&l

Vite中的环境变量处理

1. 原理Vite是用dotenv这个第三方库去实现的dotenv这个第三方库会自动读取.env文件,并解析这个文件中对应的环境变量,并将其注入到process.env下面(Node的进程信息)。但是vite考虑到和其他配置的一些冲突问题,他不会直接注入到process对象下。其中涉及到vite.c

如何让vite.config.js出现语法提示

引入defineConfigimport { defineConfig } from "vite" // 引入defineConfig可以出现语法提示,因为defineConfig这个函数里面规定了用户应该配置的项目。export default defineConfig({ // 返回该对象 &n