Vite 构建工具配置指南

[bouquetrender]

Vite 构建工具基于浏览器原生 ES 模块解析规则，利用了现代浏览器的特性，实现无需打包即可快速启动开发服务器，并支持开箱即用的 TypeScript、Vue 单文件组件等。Vite 不需要像 webpack 那样先将所有文件打包成一个或多个 bundle，然后再运行应用程序。相反 Vite 会在浏览器中使用原生的 ES 模块加载器来加载模块。

这是一份我在 React 项目中常用的 vite.config.js 配置代码，为了较好阅读添加了注释，包含了许多通用配置仅供参考。

import { defineConfig } from "vite";
import path from "path";

import react from "@vitejs/plugin-react-swc";
import checker from "vite-plugin-checker";
import { compression } from "vite-plugin-compression2";
import { createHtmlPlugin } from "vite-plugin-html";
import svgr from "vite-plugin-svgr";

import LessPluginImportNodeModules from "less-plugin-import-node-modules";
import fs from "fs";
import { comlink } from "vite-plugin-comlink";

import autoprefixer from "autoprefixer";

// 代理配置
const API_TARGET = "https://10.28.100.149";
// 代理的请求api 前缀路径
const requestProxy = ["/api"];

const VITE_APP_NAME = "system";
const DEV_HOST = "localhost";
const DEV_PORT = 8019;
const isProd = process.env.NODE_ENV === "production";

const proxy = {};
requestProxy.forEach((v) => {
	proxy[v] = {
		target: API_TARGET,
		changeOrigin: true,
		secure: false,
	};
});

export default defineConfig({
	// 基础路径
	base: `/${VITE_APP_NAME}/`,

	// 插件
	plugins: [
		// 只在生产环境引入 plugin-transform-react-jsx
		isProd
			? react({
					babel: {
						plugins: ["@babel/plugin-transform-react-jsx"],
					},
			  })
			: [],

		// 根据 tsconfig 检查代码的类型和语法错误
		checker({
			typescript: {
				tsconfigPath: path.resolve(__dirname, "./tsconfig.json"),
			},
		}),

		// 压缩代码文件
		compression({
			compressionOptions: {
				ext: ".gz",
				algorithm: "gzip",
				deleteOriginFile: false,
				verbose: false,
			},
		}),

		// 创建HTML
		createHtmlPlugin({
			inject: {
				data: {
					title: "后台系统",
				},
			},
			template: "./index.html",
		}),

		// 处理svg
		svgr({
			svgrOptions: { icon: true },
		}),

		// 用于 web worker
		comlink(),
	],

	// 定义 Web Worker 插件，使用 Comlink 插件
	worker: {
		plugins: [comlink()],
	},

	// 优化依赖配置项
	optimizeDeps: {
		// esbuild 配置
		esbuildOptions: {
			// 指定对 .js 文件使用 jsx 加载器进行编译
			loader: { ".js": "jsx" },
			plugins: [
				{
					name: "load-js-files-as-jsx",
					setup(build) {
						build.onLoad({ filter: /src\/.*\.js$/ }, (args) => ({
							loader: "jsx",
							contents: fs.readFileSync(args.path, "utf8"),
						}));
					},
				},
			],
		},
	},

	// 配置 CSS 处理行为
	css: {
		// CSS 模块化支持
		modules: {
			localsConvention: "camelCaseOnly",
		},
		// 预处理器配置
		preprocessorOptions: {
			scss: {
				javascriptEnabled: true,
			},
			less: {
				javascriptEnabled: true,
				modifyVars: {
					prefixCls: "inspection",
					"root-entry-name": "default",
				},
				plugins: [new LessPluginImportNodeModules()],
			},
		},
		// PostCSS 配置
		postcss: {
			plugins: [
				autoprefixer({
					overrideBrowserslist: ["Chrome > 50", "ff > 31", "ie 11"],
				}),
			],
		},
	},

	// 输出目录&构建选项配置
	build: {
		outDir: "dist/system",
		chunkSizeWarningLimit: 1024,
		minify: "esbuild",
		// 配置 Rollup 的构建参数
		rollupOptions: {
			output: {
				chunkFileNames: "assets/js/[name]-[hash].js",
				entryFileNames: "assets/js/[name]-[hash].js",
				assetFileNames: "assets/[ext]/[name]-[hash].[ext]",
			},
		},
	},

	// 配置模块别名
	resolve: {
		alias: [
			{ find: /^~/, replacement: "" },
			{ find: "@", replacement: path.resolve(__dirname, "./src") },
			{ find: "icons", replacement: path.resolve(__dirname, "./src/components/Icons") },
			{ find: "App", replacement: path.resolve(__dirname, "./src/app") },
			{ find: "common", replacement: path.resolve(__dirname, "./src/common") },
		],
	},

	// 配置开发服务器
	server: {
		// 允许跨域
		cors: true,
		// 允许来自任何域名的跨域请求，设置CORS响应头。
		headers: {
			"Access-Control-Allow-Origin": "*",
		},
		// 设置本地开发服务器的端口号
		port: DEV_PORT,
		// 启用热模块替换，设置开发服务器的主机名和端口号。
		hmr: {
			host: DEV_HOST,
			port: DEV_PORT,
		},
		//  使用HTTPS协议，提供安全的通信机制。配置SSL证书，读取SSL证书文件的路径。
		https: {
			key: fs.readFileSync("./public/.cert/key.pem"),
			cert: fs.readFileSync("./public/.cert/rootCA.pem"),
		},
		// 代理服务器
		proxy,
	},
});

配置项：

• base 指定基础路径。
• plugins Vite 插件数组，包含 React、Qiankun、TypeScript 校验、Gzip 压缩、HTML 模板、SVG 图标转换和 Comlink。
• worker 定义 Web Worker 插件，使用了 Comlink 插件。
• optimizeDeps 配置优化依赖项的选项，使用了 esbuild。
• css 配置 CSS 预处理器和 PostCSS 插件。使用了 SCSS 和 Less 预处理器以及 Autoprefixer 插件。
• build 指定输出目录和构建选项。其中包括输出目录、代码压缩、Rollup 配置等。
• resolve 配置模块别名，用于在代码中使用简洁的模块路径。
• assetsInclude 配置需要包含的静态资源。
• server 配置开发服务器的选项，包括端口号、跨域、热更新、代理等。

优化插件：

• vite-plugin-compression：此插件可以对构建出来的文件进行压缩，从而减小文件大小，提高页面加载速度。
• vite-plugin-style-import：此插件可以让你在项目中使用 CSS 类库，比如 Ant Design 或者 Element Plus 等，从而避免了在项目中手动引入这些库的麻烦。
• vite-plugin-optimize-css：此插件可以对 CSS 进行优化，比如去除注释、删除空格等，从而减小 CSS 文件大小，提高页面加载速度。
• vite-plugin-svg-icons：如果项目中需要使用大量的 SVG 图标，可以使用此插件进行优化，将 SVG 图标转换成雪碧图，从而减少 HTTP 请求次数。
• vite-plugin-stylelint：此插件可以在构建项目时对 CSS 代码进行静态检查，避免代码中出现错误和不规范的写法。
• vite-plugin-externals：此插件可以将一些常用的第三方库从打包过程中排除，从而减少打包后文件的体积。
• vite-plugin-eslint：此插件可以在构建项目时对 JavaScript 代码进行静态检查，避免代码中出现错误和不规范的写法。
• vite-plugin-imagemin：此插件可以对图片进行压缩，从而减小图片文件大小，提高页面加载速度。