Nginx静态压缩和代码压缩，提高访问速度！

一、概述

基于目前大部分的应用，都使用了前后端分离的框架，vue的前端应用，也是十分的流行。不知道大家有没有遇到这样的问题：

随着前端框架的页面，功能开发不断的迭代；安装的依赖，不断的增多；
这样导致的问题，就是我们的前端框架，会变得十分庞大，打包出来的dist目录会变得很大了喔！！！

这样就会导致一个问题：首次访问应用，会变得很慢
这确实是一个严重的问题！！！T_T
对于这个问题，我们聪代码压缩+nginx静态资源压缩，两个方面进行研究解决

二、 nginx静态资源动态压缩

• nginx开启gzip压缩

server {
    # Nginx监听80端口，这是HTTP的默认端口
    listen       80;
    
    # Nginx同时监听IPv6的80端口
    listen  [::]:80;
    
    # 设置服务器的名称，通常用于虚拟主机配置
    server_name  localhost;
    
    # 关闭server_tokens，以隐藏Nginx版本信息
    server_tokens off;

    # 开启gzip压缩以提高传输效率
    gzip on;
    
    # 对于IE6浏览器禁用gzip压缩
    gzip_disable "msie6";
    
    # 根据请求头中的Vary字段启用gzip
    gzip_vary on;
    
    # 允许从任何代理服务器gzip压缩响应
    gzip_proxied any;
    
    # 设置gzip压缩级别为6，这是一个折衷的设置，既不会太慢也不会太大
    gzip_comp_level 6;
    
    # 设置gzip压缩的缓冲区大小
    gzip_buffers 16 8k;
    
    # 设置gzip压缩的HTTP版本
    gzip_http_version 1.1;
    
    # 设置可以使用gzip压缩的MIME类型
    gzip_types text/plain application/css text/css application/xml text/javascript application/javascript application/x-javascript;
    
    # 配置一个特定的location，用于处理/jxbp路径下的请求
    location /jxbp {           
        # 设置路径的别名，指向实际的文件目录
        alias  /opt/llsydn/jxbp;
        
        # 默认请求文件
        index index.html;
        
        # 尝试提供请求的URI，如果不存在则尝试提供URI结尾的目录，如果还不存在则提供/dist/index.html
        try_files $uri $uri/ /dist/index.html;
    }
}

然后重启nginx：nginx -s reload
看看是否已经生效！！！

• 压缩的效果图

三、 前端静态资源静态压缩

• 将js、css等文件，生成对应的.gz文件

这个，就可以借助一些依赖进行处理了：compression-webpack-plugin
安装依赖：

npm install compression-webpack-plugin -D

• vue.config.js

const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
vueConfig.configureWebpack.plugins.push(new CompressionWebpackPlugin({
    test:/.js$|.html$|.\css/, // 匹配文件名
    threshold: 1024, // 对超过1k的数据压缩
    deleteOriginalAssets: false // 不删除源文件
}))

打包：

npm run build

注意：nginx得安装如下几个命令

ngx_http_gzip_module模块
ngx_http_gzip_static_module模块
ngx_http_gunzip_module模块 ```