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

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

实现方法的详细步骤：
1. 上传图片到 Cloudflare 的存储桶

（1）登录 Cloudflare Dashboard：

• 进入 Cloudflare 的管理后台。
  

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

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

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

• 确保存储桶支持公开访问。
  
• 示例公共 URL：
  1. https://<your-account-id>.r2.cloudflarestorage.com/<bucket-name>/home_top_bg.webp

  复制代码

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

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

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

复制代码

替换为：

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

复制代码

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

使用动态导入（懒加载）

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

1. 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://.r2.cloudflarestorage.com//nothome_top_bg.webp");};loadImages();

复制代码

设置图片缓存

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

4. 在 Webpack 中处理远程资源

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

在 webpack.config.js 中配置：

1. module.exports = {
2.     resolve: {
3.         alias: {
4.             "@images": "https://<your-account-id>.r2.cloudflarestorage.com/<bucket-name>",
5.         },
6.     },
7. };

复制代码

在代码中：

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

复制代码

使用 DefinePlugin 替换变量

在 webpack.config.js 中添加：

1. 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"),        }),    ],};

复制代码

在代码中使用：

1. const homeTopBg = HOME_TOP_BG_URL;

复制代码

5. 优势与注意事项

优势：

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

注意事项：

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

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

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！