剖析可优化项目

先经过’rollup-plugin-visualizer’ 来剖析打包的成果

npm i rollup-plugin-visualizer -D

plugins: [
    visualizer({open: true}),
		react(),
	],

看体积占用图，对于是否进行分区打包没有影响,不写下面的就都会打包到assets一个文件夹里边

build: {
		rollupOptions: {
			output: {
				chunkFileNames: "js/[name]-[hash].js", // 生成chunk文件名的名称
				entryFileNames: "js/[name]-[hash].js", // 包的进口文件名称
				assetFileNames: "[ext]/[name]-[hash].[ext]", // 资源文件像 字体，图片等
			},
		},
	},

gzip，Brotli文件紧缩

文件紧缩会紧缩js，css，html，svg文件。字体，图片文件等不会紧缩

经过vite-plugin-compression来紧缩

npm install vite-plugin-compression -D

• gzip是在deflate上的算法，deflate就是打包成zip的算法

ViteCompressionPlugin({
			algorithm: "gzip",
			ext: ".gz",
			deleteOriginFile: true,
		}),

• Brotli 是谷歌的算法，紧缩率好于gzip，但是只支持HTTPS

ViteCompressionPlugin({
			algorithm: "brotliCompress",
			ext: ".br",
			deleteOriginFile: true,
		}),

gzip紧缩后空间极大削减占用，此示例中8.67->2.75MB

Brotli 会有更大的紧缩率，此例子中8.67->2.46MB

图片紧缩

图片紧缩运用vite-plugin-imagemin

npm i vite-plugin-imagemin -D

依据你需求的紧缩配置即可

viteImagemin({
			gifsicle: {
				optimizationLevel: 7,
				interlaced: false,
			},
			optipng: {
				optimizationLevel: 7,
			},
			mozjpeg: {
				quality: 20,
			},
			pngquant: {
				quality: [0.8, 0.9],
				speed: 4,
			},
			svgo: {
				plugins: [
					{
						name: "removeViewBox",
					},
					{
						name: "removeEmptyAttrs",
						active: false,
					},
				],
			},
		}),

紧缩成果如下，本来图片就够小的情况下紧缩率不高

字体紧缩

现在大部分内容都现已紧缩，只剩下字体文件依然比较大

const fs = require("fs");
const Fontmin = require("fontmin"); // 需求借助 fontmin 插件
// 获取指定目录下的一切文件
function getFiles(dir) {
	const results = [];
	const list = fs.readdirSync(dir);
	for (const file of list) {
		const filePath = `${dir}/${file}`;
		const stat = fs.statSync(filePath);
		if (stat.isDirectory()) {
			results.push(...getFiles(filePath));
		} else {
			results.push(filePath);
		}
	}
	return results;
}
// 扫描目录并获取一切字符
function scanDirectory(dir) {
	let set = new Set();
	const files = getFiles(dir);
	for (const file of files) {
		const content = fs.readFileSync(file, "utf8");
		const currentSet = new Set(content);
		set = new Set([...set, ...currentSet]);
	}
	return set;
}
// 生成最终的 HTML 代码
function generateFinalHTML(finalString) {
	const fontmin = new Fontmin()
		.src("./src/assets/fonts/YouSheBiaoTiHei.ttf") // 源字体文件途径
		.dest("./src/assets/fonts/fontmin/") // 紧缩后文件存放途径，最终运用的是这个紧缩后的文件
		.use(
			Fontmin.glyph({
				text: finalString, // 也能够直接指定需求生成的字符集
				hinting: false,
			})
		);
	fontmin.run((err) => {
		if (err) {
			throw err;
		}
	});
}
// 扫描指定目录并生成最终的 HTML 代码
let set = scanDirectory("src/views");
let  finalString = Array.from(set).join("");
generateFinalHTML(finalString);
console.log("共生成：" + finalString.length + "个字符");

当然这是有缺陷的，只会保存本地项目里运用的静态字符，对于后端回来的没在本地出现的字符是没掩盖到的，是不完全的子集，能够考虑运用额外的常用内容添加到字符串中进行拓展实现掩盖

Vite紧缩作用

现在我们现已把dist文件夹从最初的8.67MB，紧缩到了很小的1.50MB