【记录】使用R2 CDN替换本地项目图片以加速图片加载

将图片存储到 Cloudflare 的存储桶中，并通过其提供的公共 URL 来替换代码中的本地路径，可以减小项目中打包的图片文件体积

实现方法的详细步骤：

1. 上传图片到 Cloudflare 的存储桶

（1）登录 Cloudflare Dashboard：

• 进入 Cloudflare 的管理后台。

（2）配置 R2 存储桶（如果使用 R2）：

• 创建一个 R2 存储桶，并上传图片到该存储桶。
• 记录每张图片的公共 URL（可以通过访问权限设置为公开，生成访问地址）。

（3）获取图片的公共链接：

• 确保存储桶支持公开访问。
• 示例公共 URL：

  https://<your-account-id>.r2.cloudflarestorage.com/<bucket-name>/home_top_bg.webp
  

2. 替换代码中的本地路径为远程 URL

在你的 JS 文件中，修改导入路径，直接使用图片的 Cloudflare URL。例如：

原代码：

import homeTopBg from "../../images/webp/home_top_bg.webp";
import netHomeTopBg from "../../images/webp/nothome_top_bg.webp";

替换为：

const homeTopBg = "https://<your-account-id>.r2.cloudflarestorage.com/<bucket-name>/home_top_bg.webp";
const netHomeTopBg = "https://<your-account-id>.r2.cloudflarestorage.com/<bucket-name>/nothome_top_bg.webp";

3. 优化图片加载（可选）

使用动态导入（懒加载）

如果这些图片不是页面初始化时必须加载的资源，可以通过动态导入减少初始加载时间：

const loadImages = async () => {
    const homeTopBg = await import("https://<your-account-id>.r2.cloudflarestorage.com/<bucket-name>/home_top_bg.webp");
    const netHomeTopBg = await import("https://<your-account-id>.r2.cloudflarestorage.com/<bucket-name>/nothome_top_bg.webp");
};
loadImages();

设置图片缓存

• 确保 Cloudflare 的存储桶开启了缓存功能，可以通过 HTTP 头部如 Cache-Control 指令优化图片的加载性能。

4. 在 Webpack 中处理远程资源

如果你希望在 Webpack 配置中直接替换图片路径，可以通过 Webpack 的别名或插件实现：

使用别名替换路径

在 webpack.config.js 中配置：

module.exports = {
    resolve: {
        alias: {
            "@images": "https://<your-account-id>.r2.cloudflarestorage.com/<bucket-name>",
        },
    },
};

在代码中：

import homeTopBg from "@images/home_top_bg.webp";

使用 DefinePlugin 替换变量

在 webpack.config.js 中添加：

const webpack = require('webpack');
module.exports = {
    plugins: [
        new webpack.DefinePlugin({
            HOME_TOP_BG_URL: JSON.stringify("https://<your-account-id>.r2.cloudflarestorage.com/<bucket-name>/home_top_bg.webp"),
        }),
    ],
};

在代码中使用：

const homeTopBg = HOME_TOP_BG_URL;

5. 优势与注意事项

优势：

• 减小打包体积：不再需要将大图片打包到项目中。
• 灵活性：可以随时替换图片而无需重新打包项目。
• 缓存优化：通过 Cloudflare 的 CDN 提升图片加载速度。

注意事项：

1. 网络依赖：图片加载依赖网络，如果网络不稳定可能会影响加载体验。
2. 权限配置：确保存储桶的访问权限设置为公开，避免图片无法加载。
3. CORS 问题：如果图片需要跨域加载，确保 Cloudflare 存储桶设置了 Access-Control-Allow-Origin 头部。

通过这种方式，将本地大图片替换为 Cloudflare 存储桶中的远程图片，可以有效优化前端项目的加载性能。

来源链接：https://www.cnblogs.com/huazzi/p/18634411