Vite笔记之13-vite加载静态资源

在前端开发中，除了通过API动态请求的数据外，HTML文件和诸如图片、字体等资产文件通常被视为静态资源。Vite默认将静态资源放置在assets目录下进行管理。有助于保持项目的结构清晰，并便于Vite进行高效的资源处理。

项目结构示例

├─main.js
├─vite.base.config.js
├─src
|  ├─imageLoader.js
|  |   ├─json
|  |   |  └index.json
|  |   ├─images
|  |   |   └axios.png

注意：为了更清晰地展示，我将json和images文件夹移动到了assets下，这是为了符合常规的项目结构，尽管在原始示例中它们被放在了imageLoader.js的同级目录下。

imageLoader.js

在imageLoader.js中，我们尝试加载并显示一个图片资源。Vite允许我们通过特定的路径别名来引用资源，这在vite.base.config.js配置文件中进行了设置。

// import imageSrc from "./assets/images/axios.png?raw"; // buffer 二进制  
import imageSrc from "@assets/images/axios.png";

console.log("打印***imageSrc", imageSrc); ///src/assets/images/axios.png
// 服务端 他会去读取这个图片文件的内容 ---> Buffer  二进制的字符串
// Buffer 对于图片没什么意义 对于svg有意义
const img = document.createElement("img");
img.src = imageSrc;

document.body.appendChild(img);

main.js

import "./src/imageLoader";
import jsonFile from "@assets/json/index.json";
import { name } from "@assets/json/index.json";

// 这个对象我都用到了, 那么打包工具敢删除对象里面的成员吗？？？

// 流媒体 video src 都不是一个mp4 rtmp
// lodash ---> js工具库 深度克隆 导入使用{cloneDeep} from 'lodash' 不要整体删除

// 企业项目: 如果生产环境非常的臃肿和性能差
// 控制导入

// tree shaking 摇树优化: 打包工具会自动帮你移除掉那些你没有用到的变量或者方法
console.log("打印***jsonFile", jsonFile, name); // 用的不是vite jsonFile作为json字符串形式

vite.base.config.js

import { defineConfig } from "vite";
const path = require("path");

export default defineConfig({
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
      "@assets": path.resolve(__dirname, "./src/assets"),
    },
  },
})

路径进行替换了

总结

通过Vite的别名配置，我们可以更灵活地管理项目中的静态资源。在imageLoader.js中，我们展示了如何加载并显示图片资源；在main.js中，我们演示了如何以不同方式导入JSON文件，并验证了Vite的摇树优化（Tree Shaking）功能，即自动移除未使用的代码。此外，通过合理的项目结构和配置，我们可以提高开发效率，并保持项目的可维护性。

Vite的这些特性使得它成为现代前端项目构建的有力工具，特别是在处理静态资源和优化打包结果方面。