没有？我偏要！用Node+React实现打包后静态资源自动上传到CDN

前端

2024-02-15 14:10:32

为了加速网站首次访问的速度，我做了如下事项：

使用CDN将静态资源（CSS、JS、图片等）托管在离用户最近的服务器上。
使用Webpack对静态资源进行压缩和优化。
在构建完成后自动将静态资源上传到CDN。

这样，当用户访问网站时，静态资源将直接从CDN服务器加载，而不是从你的服务器加载。这将大大减少加载时间，并提高网站的性能。

Node.js和React.js

Node.js是一个跨平台的JavaScript运行时环境。它使您可以在服务器端运行JavaScript代码。
React.js是一个用于构建用户界面的JavaScript库。它可以帮助你快速创建交互式的、高效的和可重用的UI组件。

Webpack

Webpack是一个用于构建JavaScript应用程序的模块化构建工具。它可以将你的应用程序的源代码打包成一个或多个捆绑文件。捆绑文件包含了你的应用程序所需的所有代码和依赖项。

CDN

CDN（内容分发网络）是一个由分布在不同地理位置的服务器组成的网络。CDN将静态资源（如CSS、JS、图片等）存储在这些服务器上。当用户访问网站时，静态资源将直接从最近的CDN服务器加载。这将大大减少加载时间，并提高网站的性能。

自动上传脚本

我创建了一个Node.js脚本，该脚本可以在构建完成后自动将静态资源上传到CDN。该脚本使用AWS SDK for Node.js来与AWS S3服务进行交互。

以下是如何使用该脚本的步骤：

在你的项目中安装Node.js和Webpack。
创建一个.env文件，并在其中设置以下环境变量：

AWS_ACCESS_KEY_ID=你的AWS访问密钥ID
AWS_SECRET_ACCESS_KEY=你的AWS秘密访问密钥
AWS_DEFAULT_REGION=你的AWS默认区域
AWS_S3_BUCKET_NAME=你的AWS S3存储桶名称
CDN_DOMAIN=你的CDN域名

在你的项目中创建webpack.config.js文件。该文件包含了Webpack的配置。
在你的项目中创建build.js文件。该文件包含了构建脚本。

const webpack = require('webpack');
const AWS = require('aws-sdk');

const s3 = new AWS.S3();

webpack(config, (err, stats) => {
  if (err) {
    console.error(err);
    return;
  }

  const files = stats.toJson().assets.filter(asset => asset.name.match(/\.js$|\.css$|\.png$|\.jpg/));

  files.forEach(file => {
    const filePath = path.join(__dirname, 'dist', file.name);

    s3.upload({
      Bucket: process.env.AWS_S3_BUCKET_NAME,
      Key: file.name,
      Body: fs.readFileSync(filePath)
    }, (err, data) => {
      if (err) {
        console.error(err);
        return;
      }

      console.log(`File ${file.name} uploaded to CDN`);
    });
  });
});