umi3、koa2搭建个人博客项目性能优化（实战）

首先说明下，我搭建的前提：
前端使用的是umi3+ts，后端使用的是node.js的框架koa2，阿里云服务nginx部署。
当网站正式上线，开始的速度惊到我了，如下图：

优化方向

初步分析下，有这几个方向可以执行：
1.css和js包载入时间过长，按需加载是个方向，或异步加载js文件
2.优化代码，删除没必要的东西，减少代码体积
3.部分图片加载过时间过长，压缩图片
4.压缩代码

说干就干，

第一步， 将用的本地图片，用ps全部压缩一遍，此步省略

第二步，umi中实现前端按需加载，官网接口，主要就是在 .umirc.ts中

export default defineConfig({
	...
	dynamicImport: {
	    loading: '@/Loading',
	  },
	  ...
})

而loading组件，创建在src根目录中，umi会自动获取到该组件

第三步，删除log打印的代码
安装

yarn add babel-plugin-transform-remove-console

使用 —— umirc.ts中写入如下配置

//判断只有在生产模式才开启
const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
export default defineConfig({
	extraBabelPlugins:[
    IS_PROD?'transform-remove-console':""
  ],
})

做到这里，我们看下效果如何，如下图：

加载时间已经减到16s了，完成了一大步的提升，冲，继续冲~
第四步，代码压缩
1.前端代码压缩
安装

yarn add compression-webpack-plugin

使用 —— umirc.ts中写入如下配置

//引入
const CompressionPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
export default defineConfig({
	...
	chainWebpack(memo){
	    memo.plugin('CompressionPlugin').use(new CompressionPlugin({
	      filename: "[path].gz[query]",
	      algorithm: "gzip",
	      test: productionGzipExtensions,
	      // 只处理大于xx字节 的文件，默认：0
	      // 若某些文件代码体积过小 再压缩可能导致体积反增
	      threshold: 10240,
	      // 示例：一个1024b大小的文件，压缩后大小为768b，minRatio : 0.75
	      minRatio: 0.8, // 默认: 0.8
	      // 是否删除源文件，默认: false
	      deleteOriginalAssets: false
	    }));
	  }
  })

注：此处运行可能会有bug，报错为 Cannot read property ‘tapPromise’ of undefined，原因是该版本过高，卸载下低版本的

yarn remove compression-webpack-plugin
yarn add compression-webpack-plugin@5.0.1

2.后端代码压缩
安装

npm i koa-compress

使用

const compress = require('koa-compress')
// 开启gzip
app.use(compress({threshold: 2048}))

第五步，服务器nginx开启Gzip
在nginx.conf配置

http {
    ...
    
    # gizp压缩配置
    gzip on;
    gzip_min_length 1k;
    gzip_buffers 4 8k;
    gzip_http_version 1.1;
    gzip_comp_level 6;
    gzip_types text/plain qpplication/x-javascript text/css application/xml text/javascript application/javascript application/json;
    gzip_disable "MSIE [1-6]";
    gzip_vary on;
    
    ...
}

好啦，下面看下我们的效果如何，如下图：

速度又快了一倍，很好
如何查看是否已经被压缩了呢？点击其中一个js或css

注：
Content-Encoding有没有gzip是表示 nginx是否启动gzip (在响应头中)
Accept-Encoding有没有gzip是表示客户端支持压缩类型（在请求头中）

但是这里有个坑，发现图片的体积还是很大，并且没有在服务器压缩，本想配置静态资源（图片）的服务器压缩，在查看文档下，发现：
就是图片启用GZip压缩，不仅浪费了CPU，还增大了体积，势必影响服务器性能，影响网站速度。图片要启用gzip压缩吗？绝对不要！
来源此处

第六步 进一步压缩大体积的图片，最后得到如下的速度：

很好，比一开始快了10倍了，但是任需努力；
欢迎各位大佬，来留言点赞~~~ KP个人博客