前端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技术对于前端开发来说是一个非常有用和值得应用的技术,可以极大地提升网站的性能和用户体验。