[性能优化]前端性能优化 - CDN缓存篇

1[开发与构建]2       ↓3[生成静态资源] (JS, CSS, 图片, fonts)4       ↓5[上传源站 / 对象存储] (OSS / COS / S3)6       ↓7[CDN 分发与缓存]8       ↓9[用户访问命中 CDN][开发与构建]
       ↓
[生成静态资源] (JS, CSS, 图片, fonts)
       ↓
[上传源站 / 对象存储] (OSS / COS / S3)
       ↓
[CDN 分发与缓存]
       ↓
[用户访问命中 CDN]

1// webpack.config.js2const path = require('path');3 4module.exports = {5  entry: './src/index.js',6  output: {7    path: path.resolve(__dirname, 'dist'),8    filename: '[name].[contenthash].js',9    publicPath: 'https://cdn.example.com/',10  },11  module: {12    rules: [13      {14        test: /\.(png|jpg|gif|svg)$/i,15        type: 'asset/resource',16        generator: {17          filename: 'images/[name].[hash][ext]',18        },19      },20      {21        test: /\.css$/,22        use: ['style-loader', 'css-loader'],23      },24    ],25  },26};// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    publicPath: 'https://cdn.example.com/',
  },
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif|svg)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'images/[name].[hash][ext]',
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

1const COS = require('cos-nodejs-sdk-v5');2const fs = require('fs');3const path = require('path');4 5const cos = new COS({6  SecretId: process.env.COS_SECRET_ID,7  SecretKey: process.env.COS_SECRET_KEY,8});9 10const BUCKET = 'your-bucket';11const REGION = 'ap-guangzhou';12const LOCAL_DIR = path.resolve(__dirname, '../dist');13 14function uploadFile(filePath) {15  const Key = path.relative(LOCAL_DIR, filePath).replace(/\\/g, '/');16  cos.putObject({17    Bucket: BUCKET,18    Region: REGION,19    Key,20    Body: fs.readFileSync(filePath),21  }, (err) => {22    if (err) console.error('上传失败:', Key, err);23    else console.log('上传成功:', Key);24  });25}26 27fs.readdirSync(LOCAL_DIR).forEach(file => uploadFile(path.join(LOCAL_DIR, file)));const COS = require('cos-nodejs-sdk-v5');
const fs = require('fs');
const path = require('path');

const cos = new COS({
  SecretId: process.env.COS_SECRET_ID,
  SecretKey: process.env.COS_SECRET_KEY,
});

const BUCKET = 'your-bucket';
const REGION = 'ap-guangzhou';
const LOCAL_DIR = path.resolve(__dirname, '../dist');

function uploadFile(filePath) {
  const Key = path.relative(LOCAL_DIR, filePath).replace(/\\/g, '/');
  cos.putObject({
    Bucket: BUCKET,
    Region: REGION,
    Key,
    Body: fs.readFileSync(filePath),
  }, (err) => {
    if (err) console.error('上传失败:', Key, err);
    else console.log('上传成功:', Key);
  });
}

fs.readdirSync(LOCAL_DIR).forEach(file => uploadFile(path.join(LOCAL_DIR, file)));