把项目部署成功之后，发现还是有很多问题。

首页打开速度问题

打开网站差不多要7秒，在8秒原则的边界疯狂试探...

做的尝试：

gzip压缩

安装插件

npm install compression-webpack-plugin --save-dev

调整vue.config.js文件

    configureWebpack: () => {
   if(process.env.NODE_ENV === 'production'){
     return {
        externals: {
          wowjs: 'WOW',
         'cos-js-sdk-v5': 'COS',
          apexcharts: 'ApexCharts',
         },
       plugins: [
         new CompressionPlugin({
            test: /\.js$|\.html$|\.css$/, // 匹配文件名
            threshold: 10240, // 对超过10k的数据压缩
            deleteOriginalAssets: false // 是否删除未压缩的源文件，谨慎设置，如果希望提供非gzip的资源，可不设置或者设置为false（比如删除打包后的gz后还可以加载到原始资源文件）
         })
       ]
     }
   }else{
     return {
       externals: {
         wowjs: 'WOW',
        'cos-js-sdk-v5': 'COS',
         apexcharts: 'ApexCharts',
        },
     }
   }
},

执行build命令，会发现多了很多.gz结尾的文件
调整nginx配置文件

server{
  // 加上下面gzip这部分
  gzip on;
  gzip_static on;
  gzip_buffers 4 16k;
  gzip_http_version 1.1;
  gzip_comp_level 5;
  gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

  listen 80;
  server_name xxx;

  location / {
    alias /root/web/;
    index index.html;
    try_files $uri $uri/ /index.html;
    error_page 405 =200  $request_uri;
  }

}

调整完后感觉首页也没有快多少，似乎快了1秒，尴尬...还是需要继续分析一下问题

用pingdom分析性能

pingdom说要4秒打开，好吧，你的网速比我快...请求数有50...

然后下面有一些提高页面性能的建议。

总结一下主要是：

让请求减少
添加expries请求头
gzip压缩
避免空的src和href
把js放大下面
把dom减少
把favicon压缩和让它可以缓存。

我目前网站非首次打开的情况下1s或2s就打开了，所以感觉上面对我有帮助的就只有：

把index.html中cdn文件请求都放到最下面。因为script会阻塞其他下载。我的script确实大部分都不是首页用到的。

把console和注释都去掉

用到这个包 npm install -D terser-webpack-plugin,

vue.config.js

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  configureWebpack: {
    optimization: {
      // production环境生效 - 官方文档https://webpack.docschina.org/plugins/terser-webpack-plugin/
      minimizer: [
        new TerserPlugin({
          // 使用多进程并发运行以提高构建速度（webpack是单线程，开启多线程压缩速度更快）
          parallel: 4,
          // 是否将注释剥离到单独的文件中（默认为true）: 去除js打包后的LICENSE.txt文件(里面是注释)
          extractComments: false,
          terserOptions: {
            // 去除打包的console.log
            compress: {
              warnings: false,
              drop_console: true,
              drop_debugger: true,
              pure_funcs: ['console.log']
            },
            // 去除注释
            output: {
              comments: false
            }
          }
        })
      ]
    }
  }
}

删掉prefetch和preload

参考这篇文章：juejin.cn/post/711751…

配置后首页的速度大幅上升，请求数一下子减少了一半以上。一下子变成了可以2秒打开。不过其他页面资源获取上确实比之前慢了一些，但处于可接受的程度。

数据库连接速度

主要出于价格因素，我用的是腾讯云的香港服务器，阿里云的数据库，数据库一开始用的是华北区域，本地挺快，上线连接很慢，网上查说区域不同可能会影响速度。腾讯云香港数据库实在是太贵，我也不确定速度是否能提升，于是买了阿里云香港的，发现不仅本地变慢了，上线连接还是很慢！比如：登录点击后2、3后才有回应。

最终发现是自己重新部署的问题...从网上copy的快速部署文件不太对，导致重新部署后实际后端并没有更新。最终尝试腾讯云的香港数据库，速度还是可以接受的。

[个人项目] 项目速度优化-2