前端cdn加速方法，一招帮你搞定网页加速

一、什么是CDN

前端CDN，即内容分发网络（Content Delivery Network），是一种网络架构，旨在加速静态资源的传输，如html、图片、Javascript和CSS文件等。通过在网络中增加一层新的架构，CDN可以将网站内容分发到不同的节点上。这样，用户可以更快、更稳定地获取所需内容，减轻源服务器的负担，缓解网络拥挤，并提高用户访问网站的响应速度和体验。

二、CDN & 静态资源

网站的html、Javascript和CSS文件等静态资源本身具有访问频率高、承接流量大的特点，因此静态资源加载速度始终是前端性能的一个非常关键的指标。CDN 是静态资源提速的重要手段。

三、系统架构图

1. 前端静态资源包通过部署的upload模块服务上传到对应的对象存储桶中。

2. 用户登录移动云官网访问产品页面发送静态资源请求。

3.静态资源请求通过op网关等转发，从对应的对象存储桶中获取资源返回给用户。

四、Upload模块

1. 打包制作基础镜像my-cdn-upload:1.0.0。

2. 将基础镜像运行为容器服务

docker run –name my-cdn-upload –privileged -itd my-cdn-upload:1.0.0。

3. 进入容器服务中

docker exec -it ${id} bash。

4. 创建上传路径

mkdir mysql-order。

5. 退出容器，并将dist包上传到该路径下

docker cp ./dist ${id} :/mysql-order/。

6. 将容器封装成镜像

docker commit ${id} ${imageName}。

五、CDN工作原理

1. 客户端访问产品页面发送html、Javascript和CSS等静态资源请求。

2. 静态资源请求通过op网关及apisixRoute共同转发。

3. 请求到达cdn服务，判断该请求的静态资源文件类型。

4. 请求Html/json类型的静态资源文件，从own对象存储桶中获取资源，并返回给客户端。

5. 请求非Html/json类型的静态资源文件，将请求进行301重定向，从op对象存储桶中获取资源，并返回给客户端。

六、ApisixRouter配置

apiVersion: apisix.apache.org/v2alpha1

kind: ApisixRoute

metadata:

  name: dpd-mysqldb-order-web

  namespace: paas-dds

spec:

  http:

    – name: release

      priority: 10

      match:

        hosts:

          – order.mysqldb.test.internal

        paths:

          – /*

      plugins:

        – name: proxy-rewrite

          enable: true

          config:

            regex_uri: [“/*”, “/dpd-mysqldb-order-web/v5.3.0/”]  #修改为存储桶内文件路径，每次版本迭代时需要修改该文件路径

            headers:

              dest-bucket: upload-web  #dest-bucket为存储桶名

              pack-mode: history   #采用history路由需要添加该header

      backends:

        – serviceName: dpd-esd-cdn-release

          servicePort: 3001

七、Webpack配置

需要修改webpack配置，解决服务接口跨域问题：

module.exports = {

      crossorigin=”anonymous”

}

在前端开发中，CDN技术是静态资源提速的重要技术，它可以加速网站的加载速度，提高稳定性和可用性。总的来说，CDN技术对于前端开发来说是一个非常有用和值得应用的技术，可以极大地提升网站的性能和用户体验。