【性能优化】记一次web加载速度优化

项目背景：vue ，vue-cli2老项目，官网，图片多且大，很多地方竟然没有用精灵图，我吐了

方式一：压缩图片，tinypng压缩，包括用ps自定义选项小性能导出两张特别大的图片，压缩后的banner大图顺便 用background-filter：brightness() contract() 等调试增加肉眼清晰度企图混淆视听。项目size瞬间小一半以上，效果最明显

方式二：页面使用懒加载引入，两种都可以

const JoinUs = resolve => require(["@/views/joinUs/join-us.vue"], resolve)`
export default new Router({
    mode: "history",
    base: "/",
    routes: [{
            path: "/joinUs",
            name: "JoinUs",
            component: JoinUs
        }]
     })

或者：

export default new Router({
    mode: "history",
    base: "/",
    routes: [{
            path: "/joinUs",
            name: "JoinUs",
            component: () => import("@/views/aboutxx/joinUs.vue")
        }]
     })

方式三：productionSourceMap: false

方式四：productionGzip: true，并配置nginx 的gzip参数，解决首页加载白屏效果最显著
步骤如下：

• 设置或者访问远程服务器（ssh name@ip） 查找（whereis nginx）
• 到nginx对应的目录（/usr/local/etc/nginx）
• 打开nginx编辑状态（vi nginx.conf）

gzip  on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_http_version 1.0;
gzip_comp_level 2;
gzip_types text/plain application/x-javascript application/css  text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
gzip_vary off;
gzip_disable "MSIE [1-6]\.";

• 进入编辑状态后保存变更，nginx -t竟然报错 -bash: nginx: 未找到命令
• 原来是没有设置环境变量 直接来一个vim /etc/profile
• 任意位置（最后面也可）添加 export PATH=$PATH:/usr/local/nginx/sbin
• 保存退出 source /etc/profile让配置文件重新生效一下
  
  方式五：路由和代码分割，使用 vue-router 的路