前端性能优化 - 使用内容分发网络CDN

为什么使用CDN

当引入的组件越来越多时，运用 webpack 打包后的 app.js 文件容易变得过大，对首屏加载很不友好。
使用CDN的第三方资源的JS代码，将不再打包到本地服务的JS包中。减小本地JS包体积，提高加载速度。-给网页加载提速
Vue项目打包的时候，默认会把所有代码合并生产新文件,其中包括各种库导致打包出来很大。如果使用cdn的话,会更利于程序的加载速度。
在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首开的体验。
将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来，达到加速首开的目的

解决问题

打包时间太长、打包后代码体积太大，请求慢
服务器网络不稳带宽不高，使用cdn可以回避服务器带宽问题

缺点

请求变多，第一次没做缓存的时候，有的包会下载特别慢
万一CDN资源路径有变动或者崩溃，项目没缓存的就崩溃了，建议自行搭建CDN库。

标题哪些需要使用CDN

在项目根目录下运行 npm run build --report
打包完成后，会打开一个页面，展示各个依赖包的大小，查看哪些第三方依赖包的体积大，就干掉它，从CDN上获取。

获取CDN地址

https://www.jsdelivr.com/
https://www.bootcdn.cn/

确认需要使用CDN加载的资源，在package-lock.json文件中，找到对应的版本号。
在BootCDN网站找到对应的资源路径。找不到echarts-gl的CDN资源路径

如何引入CDN

在package.json中删除即将通过 CDN 引入的组件，主要在 dependencies 和 devDependencies 中，删除 node_modules 后重新安装
vue.config.js配置

// vue.config.js
module.exports = {configureWebpack: {externals: {'vue': 'Vue','axios': 'axios','vue-router': 'VueRouter','vuex': 'Vuex','moment': 'moment','@antv/g2': 'G2','@antv/data-set': 'DataSet','ant-design-vue': 'antd','AMap': 'AMap',"element-ui": "ELEMENT", //有人说需要配置大写}},chainWebpack: config => {const cdn = {css: ['//wise-job.oss-cn-zhangjiakou.aliyuncs.com/webjs/libs/vant/index.css','//wise-job.oss-cn-zhangjiakou.aliyuncs.com/webjs/libs/element-ui/element-ui-index.css'],js: ['https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js','https://cdn.jsdelivr.net/npm/axios@0.19.0/dist/axios.min.js','https://cdn.jsdelivr.net/npm/vue-router@3.1.2/dist/vue-router.min.js','https://cdn.jsdelivr.net/npm/vuex@3.1.1/dist/vuex.min.js','https://cdn.jsdelivr.net/npm/moment@2.24.0/moment.min.js','https://cdn.jsdelivr.net/npm/moment@2.24.0/locale/zh-cn.js','https://cdn.jsdelivr.net/npm/@antv/g2@3.5.7/dist/g2.min.js','https://cdn.jsdelivr.net/npm/@antv/data-set@0.10.2/dist/data-set.min.js','https://cdn.jsdelivr.net/npm/ant-design-vue@1.3.16/dist/antd-with-locales.min.js']}// 如果使用多页面打包，使用 vue inspect --plugins 查看 html 是否在结果数组中config.plugin('html').tap(args => {// html中添加cdnargs[0].cdn = cdnreturn args})}
}

externals 配置选项的作用：

我们想引用一个库，但是又不想让webpack打包，并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用，那就可以通过配置externals。

踩坑配置注意点：element-ui要大写为ELEMENT

public/index.html
在标签中添加以下代码使用：

<!-- 使用CDN的CSS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
<link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
<% } %><!-- 使用CDN的JS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
<script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>

等价于直接引入标签

<html><head><link href="https://cdn.bootcss.com/element-ui/2.4.4/theme-chalk/index.css" rel="stylesheet"></head><body><div id="app"></div><!-- built files will be auto injected --><script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script><script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script><script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script><script src="https://cdn.bootcss.com/three.js/100/three.min.js"></script><script src="https://cdn.bootcss.com/echarts/4.1.0/echarts.min.js"></script><script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script><script src="https://cdn.bootcss.com/element-ui/2.4.4/index.js"></script><script src="https://cdn.bootcss.com/babel-polyfill/6.26.0/polyfill.min.js"></script></body>
</html>

注释掉main.js中的引入
main.js 中可能有引入相关组件的 css 文件，当使用了 css 文件的 CDN 时，无需在 main.js 中继续引用。

如果不删除原先的import，项目还是会从node_modules中引入资源。
也就是说不删的话，npm run build时候仍会将引用的资源一起打包，生成文件会大不少。所以我认为还是删了好

// main.js
import Vant from 'vant';
// import 'vant/lib/index.css'; // 使用了该 css 文件的 CDN 时，无需在 main.js 中引用
Vue.use(Vant);// import 'element-ui/lib/theme-chalk/index.css'
// import Element from 'element-ui'
// Vue.use(Element, { size: 'small' })

完成引用后打包报错

完成引用后，打包报错Vue未定义，但是启动运行正常。
因为其实定义了全局变量，但是eslint并不识别全局变量，所以需要在.eslintrc.js配置文件中添加
声明一下这些是全局变量，再次打包即可。

globals: {'Vue': true,'VueRouter': true,'Vuex': true,'THREE': true,'echarts': true,'axios': true,'_babelPolyfill': true
}

使用预获取（有待考证）

只需在链接属性上增加 rel=“prefetch”,rel=“dns-prefetch”，或者 rel=“preload” 标记。
preload：代码会被优先加载，并且会占用http并发数，从而也导致页面加载时间变长，特别是首屏时间会变长
prefetch：的代码被安排在后面加载，这样才达到了优化效果。

<script rel="preload" src="https://cdn.bootcss.com/three.js/100/three.min.js"></script>
<script rel="prefetch" src="https://cdn.bootcss.com/echarts/4.1.0/echarts.min.js"></script>

以为被preload修饰的three会优先加载，而被prefetch修饰的echarts会延后加载。
本地也好，服务器也好，配置了完全没有变化，严格按照顺序加载的……

vue-cli 4使用report分析vendor.js

Vue Cli（@/vue/cli）自带的webpack包体积优化工具，它可以查看各个模块的size大小，方便优化。只需要在build后面加上 --report 参数即可。

1、我们把命令配置到package.json里

"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","report": "vue-cli-service build --report"  //加入该行
},

2、执行npm run report 打包并生成report。
注意：网上很多说要先安装webpack-bundle-analyzer包，其实不需要安装。

3、运行 npm run report 后，会在 build 的同时，在dist目录会生成一个report.html，打开后可看到各文件占用大小

前端性能优化 - 使用内容分发网络CDN相关推荐

内容分发网络 CDN 是如何提高网页加载时间的？
几乎 Internet 上的每个人都体验过内容分发网络 (CDN) 的好处.大多数科技公司,包括谷歌.苹果和微软等公司,都使用 CDN 来减少加载网页内容的延迟. CDN 通常会将服务器放置在不同网络 ...
内容分发网络 CDN 体系中原始服务器 Original Server 的定义
源服务器的目的是处理和响应来自 Internet 客户端的传入 Internet 请求.源服务器的概念通常与边缘服务器或缓存服务器的概念结合使用.从本质上讲,源服务器是一台运行一个或多个程序的计算机, ...
阿里云ACP认证之内容分发网络CDN知识整理（考题占比 3%）
文章目录什么是内容分发网络CDN? 阿里云内容分发网络CDN分布中国境内中国境外内容分发网络CDN构成与原理内容分发网络CDN构成内容分发网络原理阿里云内容分发网络CDN优势内容分发网 ...
关于内容分发网络 CDN 的可靠性和冗余性
CDN Benefits – Reliability & Redundancy CDN 的重要特征之一是它能够在面对常见的网络问题(包括硬件故障和网络拥塞)时保持网站内容在线. 通过负载平衡 ...
CDN（内容分发网络）技术概述
本文转自:CDN(内容分发网络)技术原理前言网络缓存技术,其目的就是减少网络中冗余数据的重复传输,使之最小化,将广域传输转为本地或就近访问.互联网上传递的内容,大部分为重复的Web/FTP数据,C ...
【HTML】前端性能优化之CDN和WPO的比较
CDN通过将资源存储在更接近用户的位置,缩短到服务器的往返行程,加快页面加载时间来解决性能问题.WPO解决方案,如Radware的FastView,则在前端进行性能提升处理,使页面更有效地呈现在浏览器 ...
CDN加速-内容分发网络
内容分发网络 (互联网技术) 编辑 CDN的全称是Content Delivery Network,即内容分发网络.其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输 ...
cdn内容分发网络介绍
CDN的全称是Content Delivery Network,即内容分发网络.其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快.更稳定.通过在网络各处放置节 ...
CDN(Content Delivery Network)内容分发网络
CDN的全称是Content Delivery Network,即内容分发网络. 其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快.更稳定. 通过在网络各处放 ...