记录一次前端vue优化过程

打包文件压缩

在一次打包过程中，发现有一个js文件比较大，有两三兆左右，

在网上冲浪过程中发现可以是用gzip的方式压缩大小。

首先安装compression-webpack-plugin插件

npm i -D compression-webpack-plugin

然后在vue.config.js中配置

let productionGzipExtensions = /.(js|css|json|txt|html|ico|svg|woff2)(?.*)?$/i;

module.exports = defineConfig({
  transpileDependencies: true,
  // 打包的时候不输出map文件， map文件使用来定位错误的
  productionSourceMap: false,      
  //gzip压缩配置
  chainWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.plugin("CompressionPlugin").use('compression-webpack-plugin', [{
        filename: '[path][base].gz',
        algorithm: 'gzip',
        // 要压缩的文件（正则）
        test: productionGzipExtensions,
        // 最小文件开启压缩 10kb
        threshold: 10240,
        minRatio: 0.8
      }])
    }
  },
})

npm run build 一下

可以看到压缩后大概有700kb左右，压缩率还是很高的。

光是这样部署到服务器，还是不够的。在服务端也要开启gzip压缩。

这用的是宝塔的nginx

# 开启使用gzip;
    gzip_static on;
    gzip_proxied expired no-cache no-store private auth;
    gzip on;
    gzip_min_length 1k;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

可以看到，从服务端下载的是708kb压缩后的文件。

使用http缓存

在开启缓存后，在设置的时间内就不用重复向服务端请求数据。

expires 1d; // 表示缓存 1 天 
expires 3h; // 表示缓存 3 小时 
expires max; // 表示缓存 10 年 
expires -1; // 表示永远过期。