使用 gzip 压缩优化 Vue 的项目

发表于 分类于 Valine：

因 chunk-vendors 过大导致首屏加载太慢的优化。

安装插件

安装 compression-webpack-plugin 插件。

前端将文件打包成.gz 文件，然后通过 nginx 的配置，让浏览器直接解析.gz 文件，可以大大提升文件加载的速度。

npm 使用下面命令安装

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

修改配置

修改 vue 的配置文件 vue.config.js：

const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']


module.exports = {
  configureWebpack: {
    plugins: [
      // 配置compression-webpack-plugin压缩
      new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      }),
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 5, 
        minChunkSize: 100
      })
    ]
  }
}

Nginx 配置

server{
    listen 8087;
    server_name localhost;

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

    location /appShare {
       client_max_body_size    10m;
       root /home/test/webIndex/appShare;
       try_files $uri $uri/ /appShare/index.html;
       index index.htm index.html;
    }

}

问题解决

打包的时候报了如下错误：

ERROR  TypeError: Cannot read property 'tapPromise' of undefined
TypeError: Cannot read property 'tapPromise' of undefined

这是插件版本的问题。

安装这个插件的时候安装的是最新版本，但脚手架配置 gzip 打包还不支持这个版本的。

在降低版本后发现使用正常：

npm install compression-webpack-plugin@6.1.1 --save-dev
相关文章