本文详细介绍了CDN内容分发网络及其在Vue项目中的应用优势，包括加快用户访问速度和减少加载时间。通过vue.config.js配置，演示了如何引入外部资源，并在index.html中批量引入CDN链接。此外，还强调了通过CDN引入资源以降低打包成本和优化网页速度的重要性，以及在项目打包后如何处理相关依赖和import代码。
CDN及CDN引入的优势
CDN 的全称是 Content Delivery Network，即内容分发网络。
CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。
比如 js 有 2 种 引入方式：
-
下载代码文件至本地项目中并引入。
-
通过 CDN（内容分发网络） 引用。
使用CDN引用的一个好处：许多用户在访问其他站点时，已经从百度、又拍云、新浪、谷歌或微软加载过 jQuery。所有结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。
CDN资源网站推荐
vue.config.js配置
首先需要通过原本本地引入的位置查看需要引入资源文件的具体文件名和路径
如引入emoji-mart-vue组件需要引入的的是emoji-mart-vue@2.6.6/dist/emoji-mart.js文件
接下来在vue.config.js中进行如下配置，对引入链接统一管理
let externals = {
// key(包名) / value(这个值 是 需要在CDN中获取js, 相当于 获取的js中 的该包的全局的对象的名字)
// 后面的名字不能随便起 应该是 js中的全局对象名
'vue': 'Vue',
'vue-router': 'VueRouter',
'ant-design-vue': 'antd',
'axios': 'axios',
'vuex': 'Vuex',
'element-ui': 'ELEMENT',
'vuetify': 'Vuetify',
'emoji-mart-vue': 'EmojiMart',
'vue-cropper': 'vue-cropper',
'vue-lazyload': 'VueLazyload',
'wangeditor': 'wangEditor'
}
const cdn = {
css: [
'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900',
'https://unpkg.com/@mdi/font@latest/css/materialdesignicons.min.css',
'https://unpkg.com/material-design-icons-iconfont@6.5.0/dist/material-design-icons.css', //mdi
'https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-ui/2.15.6/theme-chalk/index.css',
'https://unpkg.com/mavon-editor@2.10.4/dist/css/index.css',
'https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vuetify/2.6.0/vuetify.min.css',
], // 放置css文件目录
js: [
'https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.11/vue.min.js', // vue
'https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue-router/3.2.0/vue-router.min.js', // vue-router
'https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/ant-design-vue/1.7.8/antd.min.js', // ant design vue
'https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.min.js', // axios
'https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vuex/3.6.2/vuex.min.js', // vuex
'https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-ui/2.15.6/index.js', // element-ui
'https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/vuetify/2.6.0/vuetify.js', // vuetify
'https://lib.baomitu.com/vue-lazyload/1.3.3/vue-lazyload.js', // vue-lazyload
'https://unpkg.com/emoji-mart-vue@2.6.6/dist/emoji-mart.js', // emoji
'https://unpkg.com/vue-cropper@0.5.8/dist/index.js', // vue-cropper
'https://unpkg.com/wangeditor@latest/dist/wangEditor.min.js' //wangEditor
]// 放置js文件目录
}
index.html引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!-- logo-->
<link rel="icon" href="<%= BASE_URL %>logo.png">
<!-- 网页标题-->
<title>MindFall</title>
<!-- 引入css-cdn的文件 -->
<% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
<link rel="stylesheet" href="<%=css%>">
<% } %>
</head>
<body>
<!-- 放置js-cdn文件 -->
<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%=js%>" ></script>
<% } %>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
index.html是前端项目的入口，在这里批量引入cdn资源。
其中，css资源文件放在头部head标签下，js资源文件放在body标签下。
项目打包相关
本项目采用CDN引入的目的是降低打包成本，优化网页速度。因此，对于项目中已经安装在生产环境下且已通过CDN引入的依赖需要卸载并删除其相关的import代码。
这里需要对package.json文件中dependencies和devDependencies进行区分：
devDependencies 里面的依赖只用于开发环境，不用于生产环境。而 dependencies 依赖的包不仅开发环境能使用，生产环境也能使用。
而两种环境的的指定方式是通过配置文件中的NODE_ENV=developement或NODE_ENV=production来指定是开发还是生产环境的。
卸载这部分依赖且通过CDN引入资源后，能够大幅降低打包后chunk-vendors.js的大小，否则该文件在Vue项目首屏打开时将耗费大量时间。同时通过CDN引入部分css资源，也能够降低读取css文件打包后的文件大小，优化速度。
另一方面，对于全局引入的组件在相应位置删除其import代码即可。对于局部引入的组件则需要使用其暴露在window下的全局变量名（即前面引入链接处的js全局变量名）进行引入。
如wangEditor的局部引入：
const E = window.wangEditor
vue-cropper的局部引入：
const { VueCropper } = window['vue-cropper'].default
对于需要引入的组件的具体内容可以在控制台中输出window对象查看全局变量的具体组成。
console.log(window)
4625
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
