前端工程化之上cdn_cdn上,前端工程再页面中通过cdn方式引入

一、cdn介绍

cdn的使用还是和前端打包相关，我们都希望前端最后的打包页面越小越好。那么可不可以把一些包不pack进去，让用户的流浪器自行下载呢？答案是可以的，那这些包就会被托管到分发站点上，就是在全国都有服务器，用户在观看你的页面的时候，你公司的后台传过去剔除了这些依赖的实际的内容，同时用户的浏览器又会从最近的网站下载这些依赖，这样速度就能提升了。

这就是cdn，内容分发网络，有点像京东在各地的仓储节点，一起构建起一个强大的共享js脚本网络，很多大的互联网公司都提供这样的节点的，当然我们最熟悉的还是jsdelivery、unpkg这样的网站。

二、vite之中的实现

依赖vite-plugin-cdn-import这个插件就可以，下载之后我们可以在vite配置文件之中引入

import {Plugin as importToCDN } from "vite-plugin-cdn-import";

上面的引入方式比较好，因为在我的测试中，官网给出的引入方式会报错

 import importToCDN from 'vite-plugin-cdn-import'该引入方式会报错

我们需要再vite配置中写下这些内容，当然这只是个模版，具体的话可以看插件官网，写的还是比较详细的

plugins: [
    importToCDN({
      modules:[
        {
          name: "vue",
          var: "Vue",
          path: "https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.31/vue.global.prod.min.js",
        },
        {
          name: "vuex",
          var: "Vuex",
          path: "https://cdnjs.cloudflare.com/ajax/libs/vuex/4.0.2/vuex.global.prod.min.js",
        },
        {
          name: "vue-router",
          var: "VueRouter",
          path: "https://cdnjs.cloudflare.com/ajax/libs/vue-router/4.0.12/vue-router.global.prod.min.js",
        },
        {
          // 引入cdn element-plus
          name: "element-plus",
          var: "ElementPlus",
          path: "https://unpkg.com/element-plus",
          css: "https://unpkg.com/element-plus/dist/index.css",
        }
      ]

我这边的话将所有的主要的包都用上了cdn，主要是为了演示打包之后的文件的缩小情况，实际上都上cdn的话还是有风险的，因为cdn网络可能不稳定。我们来看一下打包的情况

可以看到打包已经相当小了，而且没有看到其他的依赖的内容，下面我们来到打包之后的html页面，看一下是怎么处理cdn这一块的

实际上这几个包都引入了外部js，是不是和刚学前端哪会儿，引入包的方式有点相似啊。

本篇文章完结