优化浏览器加载速度的几种方式

1. 向服务器上传图片前，先压缩一下图片大小。或者使用 Css sprites(精灵图）把所有图片都合并成一张图片
2. 利用浏览器缓存 Js 和 Css 等文件，以 nginx 为例：

 # nginx 配置示例
   server {
      #....
      #缓存资源到浏览器
      location ~ \\.(htm|html|gif|jpg|jpeg|png|bmp|ico|css|js|txt)$ {
        root /home/resultManagerSys/dist;
        expires 24h; # 缓存 24h
     }
}

3. gzip 压缩 JS 和 CSS 文件，以nginx 为例：

 # gzip 配置
  gzip on;                        #开启gzip压缩
  gzip_disable "MSIE [1-6]\."     #ie1-6无效
  gzip_vary on;                   #表示在传送数据时，给客户端说明我使用了gzip压缩
  gzip_min_length 1k;             #设置允许压缩的页面最小字节数; 这里表示如果文件小于1k，就不用压缩，因为没有意义，本来就很小
  gzip_comp_level 5;              #压缩等级越大传输速率越快但是处理时间也越多(1-9)
  gzip_buffers 4 16k;             #缓冲区大小，这里指的是4个16k的
  gzip_http_version 1.1;          #识别http协议的版本,早期浏览器可能不支持gzip自解压,用户会看到乱码
  gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon image/jpeg image/jpg image/png;         #制定压缩的类型,线上配置时尽可能配置多的压缩类型!

4. 精简 JS 和 CSS 代码
例如：JS代码压缩后 去除空格和注释，CSS 合并属性，如 margin-top，margin-left合并成一个 margin
5. CDN 分发的方式减轻服务器网络压力，以 vue 项目为例：

//首先在index.html中引入外部CDN(要注意依赖关系,例如elmentui依赖vue,所以vue也需要采用CDN导入的方式,尽量锁定版本号)
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10"></script>

  //新建vue.config.js文件，和src同级(不要建至src下)
  module.exports = {
      configureWebpack: {
          externals: {
              vue: "Vue",             #左侧为你在代码中使用的名称，右侧为导入外部CDN暴露的全局变量名称(右边名称一定不能自定义，得是外部CDN暴露的全局变量名称)
              "vue-router": "VueRouter",
              vuex: "Vuex",
              axios: "axios",
              "element-ui": "ELEMENT",
              "v-charts": "VeIndex",
              xlsx: "XLSX"
              }
      }
  };
  //main.js下使用左侧你定义的名称
  import VCharts from "v-charts";
  import ELEMENT from "element-ui";
  Vue.use(ELEMENT);
  Vue.use(VCharts);