uniapp 性能提升之gzip()

这是个什么妖怪框架嘛！这个前端界面的性能简直辣眼睛啊。

image.png

搞了一下午，终于把它优化了一丢丢儿

image.png

uniapp下新增vue.config.js文件

安装依赖

npm install brotli-webpack-plugin -s
npm install compression-webpack-plugin -s
npm install @gfx/zopfli -s

vue.config.js内容

const BrotliPlugin = require("brotli-webpack-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
const zopfli = require("@gfx/zopfli");

let plugins = [];
if (process.env.NODE_ENV === "production") {
  const compressionTest = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
  plugins = [
    new CompressionPlugin({
      algorithm(input, compressionOptions, callback) {
        return zopfli.gzip(input, compressionOptions, callback);
      },
      compressionOptions: {
        numiterations: 15
      },
      minRatio: 0.99,
      test: compressionTest
    }),
    new BrotliPlugin({
      test: compressionTest,
      minRatio: 0.99
    })
  ];
}

module.exports = {
  configureWebpack: {
    plugins
  },
  // ...omitted
}

并没有提升多少性能！！聊胜于无吧。不知道为啥这么慢！！

1630034016362_596EC4C8-54F5-42c0-BF96-C1290F305721.png

提升后

image.png