前端性能优化之 CDN 学习

参考百度及各位前辈的笔记做出如下总结

• 什么是CDN
  CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。

• 原理

  • 用户在浏览器中输入要访问的域名。
  • 浏览器向DNS服务器请求对该域名的解析。
  • DNS服务器返回该域名的IP地址给浏览器。
  • 浏览器使用该IP地址向服务器请求内容。
  • 服务器将用户请求的内容返回给浏览器。

• CDN具有以下主要功能：
  (1)节省骨干网带宽，减少带宽需求量；
  (2)提供服务器端加速，解决由于用户访问量大造成的服务器过载问题；
  (3)服务商能使用Web Cache技术在本地缓存用户访问过的Web页面和对象，实现相同对象的访问无须占用主干的出口带宽，并提高用户访问因特网页面的相应时间的需求；
  (4)能克服网站分布不均的问题，并且能降低网站自身建设和维护成本；
  (5)降低“通信风暴”的影响，提高网络访问的稳定性。

• 前端CDN的使用流程

• 具体怎么优化？

• 将依赖的静态资源如vue、vue-router、vuex等，全部改为通过CDN链接获取。
  7. 借助HtmlWebpackPlugin,可以方便的使用循环语法在index.html里插入js和css的CDN链接。推荐CDN使用
  jsDelivr 提供的。

[ ] index.html文件中

<!-- 使用CDN加速的CSS文件，配置在vue.config.js下 -->
<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style">
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
<% } %>
<!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script">
<% } %>

• vue.config.js下添加如下代码：
  这使得在使用CDN引入外部文件的情况下，依然可以在项目中使用import的语法来引入这些第三方库。

// 转为CDN外链方式的npm包，键名是引入的npm包名，键值是该库暴露的全局变量
const externals = {
    vue: 'Vue',
    'vue-router': 'VueRouter',
    vuex: 'Vuex',
    axios: 'axios',
    vant: 'vant',
    'pdfjs-dist': 'pdfjs',
};

// CDN外链，会插入到index.html中
const cdn = {
  // 开发环境
  dev: {
    css: [
      'https://unpkg.com/element-ui/lib/theme-chalk/index.css'
    ],
    js: []
  },
  // 生产环境
  build: {
    css: [
      'https://unpkg.com/element-ui/lib/theme-chalk/index.css'
    ],
    js: [
      'https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js',
      'https://cdn.jsdelivr.net/npm/vue-router@3.0.1/dist/vue-router.min.js',
      'https://cdn.jsdelivr.net/npm/vuex@3.0.1/dist/vuex.min.js',
      'https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js',
      'https://unpkg.com/element-ui/lib/index.js'
    ]
  }
}
// 添加CDN参数到htmlWebpackPlugin配置中;     
  chainWebpack: config => { config.plugin('html').tap((args) => {
            if (process.env.NODE_ENV === 'production') {
                args[0].cdn = CDN.build;
            }
            return args;
        });
}