一、概述

基于目前大部分的应用，都使用了前后端分离的框架，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字段启用gzipgzip_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.htmltry_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模块 ```