概述

webpack-plugin-cdns 是一個(gè) Webpack 插件，用于實(shí)現(xiàn)將前端項(xiàng)目中的資源（如 JavaScript、CSS、圖片等）上傳到 CDN(OSS、S3、Kodo) 服務(wù)器。從而完成資源的 CDN 加速。

在開發(fā)前端項(xiàng)目時(shí)，我們通常會(huì)將靜態(tài)資源放在本地服務(wù)器上，并在 HTML 文件中以相對(duì)路徑引用它們。然而，當(dāng)我們將項(xiàng)目部署到生產(chǎn)環(huán)境時(shí)，為了提高加載速度和穩(wěn)定性，我們可以將這些靜態(tài)資源上傳到 CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）上，并在 HTML 文件中以 CDN 路徑引用它們。這樣一來，用戶在訪問網(wǎng)站時(shí)可以從離用戶物理位置最近的 CDN 節(jié)點(diǎn)加載這些資源，提供更快的加載速度和更好的用戶體驗(yàn)。

兼容

此插件兼容 webpack 3 4 5 版本。

安裝

npm install webpack-plugin-cdns

引入

const WebpackPluginCdns = require('webpack-plugin-cdns')

或者

import WebpackPluginCdns from 'webpack-plugin-cdns'

使用

oss、 s3、kodo 選擇其一配置即可，如果多個(gè)同時(shí)存在，優(yōu)先級(jí)：oss > s3 > kodo。以下是不同 CDN 服務(wù)商對(duì)應(yīng)高配置：

阿里云 oss

plugins: [
  ..., // 其他插件
  new WebpackPluginCdns({
    from: ['./dist/**', '!*.html'], // 需要上傳的文件; 詳細(xì)書寫規(guī)則請(qǐng)查看globby
    dist: '/directory/', // CDN 資源存放目錄
    oss: {
      accessKeyId: '', // 阿里云賬號(hào)的 Access Key ID，用于身份驗(yàn)證
      accessKeySecret: '', // 阿里云賬號(hào)的 Access Key Secret，用于簽名身份驗(yàn)證。
      bucket: '', // 阿里云 OSS 中的存儲(chǔ)桶（Bucket）名稱，用于存放上傳的文件。
      region: '', // 存儲(chǔ)桶所在的地域（Region），可以是阿里云的內(nèi)網(wǎng)或外網(wǎng)地域。
    }
  })
]

亞馬遜 s3

plugins: [
  ..., // 其他插件
  new WebpackPluginCdns({
    from: ['./dist/**', '!*.html'], // 需要上傳的文件; 詳細(xì)書寫規(guī)則請(qǐng)查看globby
    dist: '/directory/', // CDN 資源存放目錄
    s3: {
      accessKeyId: '', // AWS（亞馬遜云服務(wù)）賬號(hào)的 Access Key ID，用于身份驗(yàn)證。
      secretAccessKey: '', // AWS 賬號(hào)的 Secret Access Key，用于簽名身份驗(yàn)證。
      Bucket: '', // S3 中的存儲(chǔ)桶名稱，用于存放上傳的文件。
      region: '' // 存儲(chǔ)桶所在的地域（Region），通常是一個(gè) AWS 區(qū)域代碼。
    }
  })
]

七牛云 kodo

plugins: [
  ...,
  new WebpackPluginCdns({
    from: ['./dist/**', '!*.html'],
    dist: '/directory/',
    // 七牛云 Kodo
    kodo: {
      accessKey: '',
      secretKey: '',
      bucket: ''
    }
  })
]

修改靜態(tài)資源請(qǐng)求前綴為CDN地址

具體配置根據(jù)項(xiàng)目實(shí)際情況配置到靜態(tài)資源訪問路徑即可，以下提供兩種不同配置方式作為參考：

直接配置 webpack：

module.exports = {
  output: {
    publicPath: '您的CDN地址'
  }
}

在 Vue 項(xiàng)目中，通過配置 vue.config.js 文件來自定義 Vue CLI 的構(gòu)建配置：

module.exports = {
  publicPath: '您的CDN地址'
}

總結(jié)

以上就是靜態(tài)資源上傳到 CDN 的全部?jī)?nèi)容了，其實(shí)也沒什么難點(diǎn)，讓我們?cè)陧?xiàng)目中使用起來吧。