一、概述

基于目前大部分的應用，都使用了前后端分離的框架，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模塊 ```