這裡使用的外掛程式為:compressionwebpackplugin
如果你是webpack:
const compressionwebpackplugin = require('compression-webpack-plugin')
//無配置
module.exports =
//配置
webpackconfig.plugins.push(
new compressionwebpackplugin()
)
如果你是vue,使用vue.config.js:
const compressionplugin = require("compression-webpack-plugin");
module.exports = }},
configurewebpack: )
]}};
打包的時候看有沒有.gz結尾的檔案,如果有,說明成功
開啟nginx的配置檔案nginx.conf
gzip on;
server {
gzip_static on;
gzip_proxied any;
gzip_vary on;
gzip_comp_level 6;
gzip_buffers 16 8k;
# 注:99.99%的瀏覽器基本上都支援gzip解壓了,所以可以不用設這個值,保持系統預設即可。
開啟瀏覽器
如果有這種東西,說明成功!
nginx 開啟靜態 gzip 配合 Vue 構建
在站點配置新增如下 location css js 這是 nginx 的靜態 gzip功能,會自動查詢對應副檔名的檔案,如果存在 gzip 檔案,就使用,如果沒有就用原檔案 配合 vue cli 的構建工具,開啟 config index.js 中的 productiongzip true vue預...
nginx安裝和Vue部署nginx中
2 因為nginx以來與gcc的編譯環境,所以,在mini centos中需要安裝編譯環境來使nginx能夠編譯起來 yum install gcc c 3 nginx的http模組需要使用pcre來解析正規表示式 yum y install pcre pcre devel 4 依賴的解壓包 yum...
nginx快取的開啟和禁用
在 程式除錯的時候,經常會遇到瀏覽器的快取問題導致修改過的前端 無效果。每次通過ctrl f5強制重新整理後才能清掉快取。這時如果禁用掉nginx快取,可以減少一些小麻煩,讓瀏覽器每次到伺服器去請求檔案,而不是在瀏覽器中讀取快取檔案。當程式除錯好上線後,可以開啟nginx快取,節省伺服器的頻寬流量,...