前端的 发包压缩（gzip压缩）、资源懒加载、CDN加速 简单理解

1. 发包压缩（gzip压缩）

主要是压缩你js的资源大小

a) 引入 compression webpack plugin 插件

npm i -D compression-webpack-plugin

b) vue cli3.0 可在vue.config.js中 如下配置：

const path = require("path");
const CompressionPlugin = require('compression-webpack-plugin');//引入gzip压缩插件

const webpack = require("webpack");
// vue.config.js
module.exports = {
  //基本路径(相对于服务器根目录   静态资源的相对路径)
  publicPath: process.env.NODE_ENV === "production" ? "/dist/" : "/", //font scss资源路径 不同环境切换控制

  productionSourceMap:false,//打包时不要map文件
  //输出文件目录
  outputDir: "dist",

  //是否在保存的时候检查
  lintOnSave: true,

  //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
  assetsDir: 'statick',

  devServer: {
    // host: 'localhost',
    // host: "0.0.0.0",
    // https: false, // https:{type:Boolean}
    // open: true, //配置自动启动浏览器  http://172.16.1.12:7071/rest/mcdPhoneBar/
    // hotOnly: true, // 热更新
    port: 8090
    // proxy:{
    //   '/': {
    //     target: 'http://192.168.0.125:3000/',
    //     changeOrigin: true,
    //     pathRewrite: {}
    //   },
  },
  configureWebpack: {//引入jquery
    plugins: [
      new webpack.ProvidePlugin({
        $:"jquery",
        jQuery:"jquery",
        "windows.jQuery":"jquery"
      }),
      new CompressionPlugin({//gzip压缩配置
        test:/\.js$|\.html$|\.css/,//匹配文件名
        threshold:10240,//对超过10kb的数据进行压缩
        deleteOriginalAssets:false,//是否删除原文件
      })
    ]
  },
};

一般浏览器都已支持.gz的资源文件，在http请求的Request Headers 中能看到 Accept-Encoding:gzip， 另外，要使服务器返回.gz文件，还需要对服务器进行配置，根据Request Headers的Accept-Encoding标签进行鉴别，如果支持gzip就返回.gz文件。

2. 懒加载

a) 资源懒加载

懒加载也就是延迟加载。当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张占位图，只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。

方法一：第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟.
方法二：是条件加载，符合某些条件，或触发了某些事件才开始异步下载。
方法三：可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片。

b)路由懒加载

最简单的方式就是在 router.js 中  使用component:()=> import('xxx.vue')

3. CDN加速

CDN加速的原理：

1. 用户在浏览器中输入要访问的域名。
2. 浏览器向DNS服务器请求对域名进行解析。由于CDN对域名解析进行了调整，DNS服务器会最终将域名的解析权交给CNAME指向的CDN专用DNS服务器。
3. CDN的DNS服务器将CDN的负载均衡设备IP地址返回给用户。
4. 用户向CDN的负载均衡设备发起内容URL访问请求。
5. CDN负载均衡设备会为用户选择一台合适的缓存服务器提供服务。
   选择的依据包括：
   根据用户IP地址，判断哪一台服务器距离用户最近；
   根据用户所请求的URL中携带的内容名称，判断哪一台服务器上有用户所需内容；
   查询各个服务器的负载情况，判断哪一台服务器的负载较小。
   基于以上这些依据的综合分析之后，负载均衡设置会把缓存服务器的IP地址返回给用户。
6. 用户向缓存服务器发出请求。
7. 缓存服务器响应用户请求，将用户所需内容传送到用户。
   如果这台缓存服务器上并没有用户想要的内容，而负载均衡设备依然将它分配给了用户，那么这台服务器就要向它的上一级缓存服务器请求内容，直至追溯到网站的源服务器将内容拉取到本地。

说人话就是，古代君主会在各个重要的城市把手重兵，以缓解一旦打仗部队不能及时调用的问题。请求就像打仗，客户输入网址就是来打仗，皇帝需要把最近的兵力分配到客户出一样。

做法：把所有需要的静态资源（如：jquery，vue等）用script标签引入。当然，引入地址需要是一个静态库。另外，一旦使用第三方的CDN，需要考虑网络的可到达性。这些内容既然是Host在别人的服务器上面，那么从一定意义上说，并非很可控。

 

 

感谢以下大佬指点，如有不妥可联系删除

https://www.cnblogs.com/webhmy/p/10208833.html

https://my.oschina.net/u/4337909/blog/3496949

https://www.cnblogs.com/changlon/p/10165053.html

https://blog.csdn.net/sdfujichao/article/details/52136037?utm_term=%E5%89%8D%E7%AB%AF%E6%80%8E%E4%B9%88%E5%81%9Acdn&utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~sobaiduweb~default-7-52136037&spm=3001.4430