vlambda博客
学习文章列表

本文是昨天文章的姊妹篇，昨天我们从 ElementUI 按需加载和 Spring Boot 开启 gzip 压缩两个方面来聊了 Spring Boot+Vue 项目首屏优化的问题:

但是我们也说了，前后端分离开发主流的部署是分开部署，即前端使用 Nginx 来部署。如果使用 Nginx 来部署前端项目，优化要怎么做？一起来看下：

Play

Nginx 中配置前端的 gzip 压缩，有两种思路：

1. Nginx 动态压缩，静态文件还是普通文件，请求来了再压缩，然后返回给前端。
2. Nginx 静态压缩，提前把文件压缩成 .gz 格式，请求来了，直接返回即可。

如果大家对于 Nginx 还不熟悉，可以先看看松哥这篇文章：

Nginx 压缩，一起来看大屏幕：

2.2.1 Nginx 动态压缩

动态压缩 Vue 还是使用普通的打包编译后的文件，将前端编译打包后的文件拷贝到 Nginx 的 html 目录下，然后访问 nginx：http://192.168.91.129

确保 nginx 运行成功后，接下来对 nginx 进行配置：

gzip  on;  # 开启 gzip
gzip_min_length 2k;# 超过 2kb 进行压缩
gzip_disable msie6; # ie6 不适用 gzip
gzip_types text/css application/javascript text/javascript image/jpeg image/png image/gif; # 需要处理的文件

配置完成后，重启 Nginx：

./nginx -s reload

启动成功后，再去访问前端页面，就可以看到压缩效果了。

2.2.2 Nginx 静态压缩

上面的动态压缩有一个问题，就是每次请求响应的时候都要压缩，其实都是相同的文件，总是压缩有点浪费资源。

我们可以提前将文件压缩好，就保存在服务端，需要用的时候直接返回，就会方便很多。

这需要我们首先在前端安装压缩插件：

npm install compression-webpack-plugin -D

安装成功之后，接下来在 vue.config.js 中进行配置：

const CompressionPlugin = require("compression-webpack-plugin")
module.exports = {
    devServer: {
        host: 'localhost',
        port: 8080,
        proxy: proxyObj
    },
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            return {
                plugins: [
                    new CompressionPlugin({
                        test: /\.js$|\.html$|\.css/,
                        threshold: 1024,
                        deleteOriginalAssets: false
                    })
                ]
            }
        }
    }
}

• threshold 表示超过 1kb 的文件就进行压缩。
• deleteOriginalAssets 表示压缩后是否删除原文件。

配置完成后，再次执行打包命令 vue-cli-service build。这次打包完成后，我们可以在 js 目录下看到 .gz 文件，如下：

接下来将文件上传到 Nginx 服务器，然后对 Nginx 重新进行编译打包。想让 Nginx 返回已经压缩好的文件，需要用到 Nginx 中的 http_gzip_static_module 模块，这个模块可以发送以 .gz 作为文件扩展名的预压缩文件，所以我们要对 Nginx 重新进行编译打包：

./configure --with-http_gzip_static_module
make
make install

然后在 Nginx 配置文件中开启 gzip_static，如下：

gzip_static  on;

注意，开启了 gzip_static 后，gzip_types 就失效了，所以也没必要配置这个属性了。

配置完成后，重启 Nginx，再去访问，查看浏览器日志，就会发现 gzip 已经生效了。

「注意」

静态压缩返回的 gzip 压缩文件都是提前准备好的，没有 .gz 格式的文件就会自动返回原文件。这是一种和动态压缩不同的响应策略。动态压缩是根据 Nginx 中的配置，超过配置的大小就会自动进行压缩。

好了，这一波操作下来，首屏加载速度提高了 3 倍左右。

当然，还有后招，松哥抽空再和大家聊。