前端工程化之上cdn

自己瞎琢磨

已于 2024-01-26 17:17:07 修改

阅读量793

点赞数 9

CC 4.0 BY-SA版权

分类专栏：前端综合文章标签：前端

于 2024-01-25 19:55:06 首次发布

本文链接：https://blog.youkuaiyun.com/huangfengnt/article/details/135852323

本文介绍了如何在Vite项目中使用cdn加速资源加载，通过vite-plugin-cdn-import插件引入Vue、Vuex等库，并讨论了cdn的使用优点（如文件缩小）以及潜在风险（如网络稳定性）。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、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: