Vite学习笔记

• Vite支持esmodule的方式引入模块

• Vite的配置文件是vite.config.js，可以使用defineConfig让vite配置文件具备代码提示

import { defineConfig } from 'vite';

export default defineConfig({
	optimizeDeps: {
    exclude: [] // 将指定的依赖不进行依赖预处理
  }
})

• defineConfig能够实现代码提示，是因为defineConfig函数来自于一个ts文件，其传参和返回值实现了UserConfig接口，而该接口定义了vite配置相关的所有属性，并且定义为可选属性

• 或者使用下面的方式也可以实现代码提示

/** @type import("vite").UserConfig */
const viteConfig = {
    optimizeDeps: {
        exclude: []
    },
}

export default viteConfig;

• 使用策略模式实现vite不同环境下的配置

const envResolver = {
    "build": () => {
        console.log("生产模式");
        return { ...viteBaseConfig, ...viteProdConfig };
    },
    "serve": () => {
        console.log("开发模式");
        return { ...viteBaseConfig, ...viteDevConfig };
    },
}

export default defineConfig(({
    command
}) => {
    return envResolver[command]();
})

• 在vite中使用dotenv三方库实现环境变量的配置，dotenv会读取.env中配置的环境变量，解析后注入到process对象中，但是必须手动调用loadEnv方法获取（在vite配置文件里面使用 - 对应服务端）

const env = loadEnv(mode, process.cwd(), "");

• 如果是客户端，vite会将对应的环境变量注入到import.meta.env里面，但是环境变量名称必须是VITE开头，如果需要修改这个前缀可以在vite.config.js中配置envPrefix

VITE_APP_KEY = 110

// vite.config.js
envPrefix: "ENV_" // 自定义环境变量配置前缀

• Vite可以实现配置less和sass编译参数，从而实现全局变量的定义

css: {
  // key：预处理器名称 config：配置 
  preprocessorOptions: {
    // 最终会配置到less执行参数中
    less: {
        math: "always",
        globalVars: {

        }
    },
  }
}

• postcss-preset-env库里面预设了包括语法降级、前缀补全等很多功能，还可以进行自定义配置，让部分css文件全部引入后记住其中的全局变量

• node端读文件时，如果发现使用的是相对路径，会使用process.cwd()来进行路径拼接，而process.cwd()是用来获取node执行目录，所以执行路径不同时可能导致路径拼接错误

• 摇树优化：控制导入的内容，如果不需要使用module里面所有的属性和方法，可以只引入需要用的那部分，打包工具一般都内置这个功能，但是如果引入模块的时候选择了全量引入，就无法使用该功能

• 使用resolve设置alias可以让资源路径的查找变得简单

// vite配置文件
resolve: {
	alias: {
			"@": path.resolve(__dirname, "./assets")
	}
}

• 打包工具编译后的文件名称包含hash值，是因为浏览器的缓存机制策略是如果文件名一致，直接从缓存中读取

• Vite的插件必须返回一个vite配置对象

export defatult () => {
	return {
		config() {
			 
		}
	}
}

• Vite可以通过插件实现分包、压缩资源、CDN加速等性能优化

PS：如果有需要补充的内容，请在评论区留言

转载时请注明“来自掘金 - EvenZhu”