使用 gzip 压缩优化 Vue 项目

因 chunk-vendors 体积过大导致首屏加载太慢。

安装插件

安装 compression-webpack-plugin 插件。

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

npm 使用下面命令安装：

1

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

修改配置

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


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;
    }

}

一些问题

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

1
2


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

这是插件版本的问题。

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

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

1

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