Vite优化之CDN优化

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情

是什么？

CDN：全称 content delivery network  内容分发网络 简称为CDN

从技术上解决网络带宽小，用户访问量大，网点分布不均导致的响应速度慢的问题，目的是在现有的internet中增加一层新的网络架构，将网站的内容发布到最接近用户的网络边缘，使得用户可以就近取得所需内容，提高用户访问网站的响应速度 【 好比是手机信号   站在基站旁边 手机信号肯定要比离得远的好 】

加速原理

就是在用户和服务器之间增加镜像缓存 Cache ，将用户的请求引导到镜像缓存而不是原站点服务

在CDN加速过程中，全局负载均衡DNS解析服务器会根据用户端的源IP地址，如地理位置、接入网类型，将用户的访问请求定位到离用户路由最短、位置最近、负载最轻的Cache节点（缓存服务器）上，实现就近定位。定位优先原则可按位置、可按路由、也可按负载等

在传统网站访问过程中生成N多个原网站镜像，并分别储存在不同的地区，不同线路的缓存服务器上，并在用户访问网站时做出一定的就近、负载最轻，利于用户最快访问网站路线判断，然后做出响应，这样就在用户地区、网络线路多样性的情况下，保证所有地区及网络线路都以同样的最快的速度访问网站。

Vite配置CDN

demo：仅仅引入了一个Element-plus

可以看到 没有配置之前 一个index.js  1996.49kib

配置之后 index.[ hash ].js  6.27kib

怎么做？

两种方法

1： vite-plugin-cdn-import

2: rollup-plugin-external-globals

很遗憾  demo里面采用的  "vite": "^3.1.0"  第一种没有成功  打开npm 看下载量也不是很多  因此本demo采用第二种

安装

yarn add rollup-plugin-external-globals -D

声明.d.ts

declare module 'rollup-plugin-external-globals'

build: {   
    minify: false,    
    rollupOptions: {      
    output: {        
        manualChunks: (id: any) => {          
        // if (id.includes("node_modules")) {          
        //   return id          
        //     .toString()          
        //     .split("node_modules/")[1]          
        //     .split("/")[0]          
        //     .toString();          
        // }        },      
        },      
        external:['vue','element-plus'],      
        plugins:[        
        externalGlobals({          
            "vue":"Vue",          
            "element-plus": "ElementPlus"        
             })      
           ]    
        },  Ï
     }