Vue3啟用gzip壓縮nginx配置詳解
更新時(shí)間：2023年08月31日 11:18:22 作者：south
這篇文章主要為大家介紹了Vue3啟用gzip壓縮時(shí)nginx配置gzip示例詳解詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
Vue CLI3中啟用gzip壓縮
要在Vue CLI3中啟用gzip壓縮，可以使用compression-webpack-plugin插件。
1. 安裝插件：compression-webpack-plugin
在終端中運(yùn)行以下命令安裝compression-webpack-plugin插件：
npm install --save-dev compression-webpack-plugin
2. 修改配置：vue.config.js
在vue.config.js文件中添加以下代碼：
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
configureWebpack: {
plugins: [
new CompressionPlugin({
algorithm: 'gzip', // 使用gzip壓縮
test: /\.js$|\.html$|\.mp4$|\.*$|\.css$/, // 匹配文件名
filename: '[path][base].gz[query]', // 壓縮后的文件名(保持原文件名，后綴加.gz)
minRatio: 1, // 壓縮率小于1才會壓縮
threshold: 10240, // 對超過10k的數(shù)據(jù)壓縮
deleteOriginalAssets: false, // 是否刪除未壓縮的源文件，謹(jǐn)慎設(shè)置，如果希望提供非gzip的資源，可不設(shè)置或者設(shè)置為false（比如刪除打包后的gz后還可以加載到原始資源文件）
})
]
}
}這將在webpack配置中添加compression-webpack-plugin插件，并配置它以壓縮.js，.html和.css文件。
3. 重新構(gòu)建：重新構(gòu)建Vue項(xiàng)目
壓縮后的文件應(yīng)該已經(jīng)生成了。
如果構(gòu)建成功，則在dist目錄下應(yīng)該會看到被壓縮后的文件，例如app.js.gz，app.html.gz等。
編輯 Nginx 配置文件
#開啟gzip壓縮功能 gzip on; gzip_min_length 1024; gzip_buffers 4 16k; gzip_comp_level 2; gzip_types *; gzip_vary on;
以上就是Vue3啟用gzip壓縮nginx配置詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue3 gzip壓縮nginx配置的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
文章詳細(xì)分析了Vue項(xiàng)目中靜態(tài)資源路徑失效的問題,包括開發(fā)、構(gòu)建、部署等階段的常見原因,并提供了多種解決方案,旨在幫助開發(fā)者系統(tǒng)性地解決靜態(tài)資源路徑問題,構(gòu)建穩(wěn)定可靠的前端應(yīng)用,需要的朋友可以參考下2025-03-03
這篇文章主要介紹了Vue中android4.4不兼容問題的解決方法,需要的朋友可以參考下2018-09-09
詳解vue axios用post提交的數(shù)據(jù)格式
這篇文章主要介紹了詳解vue axios用post提交的數(shù)據(jù)格式，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
Vue+Echarts實(shí)現(xiàn)分時(shí)圖和交易量圖的繪制
近來發(fā)現(xiàn)Echarts?API越發(fā)的強(qiáng)大，對于繪制各類圖形可以使用Echarts實(shí)現(xiàn)。本文將利用Echarts實(shí)現(xiàn)分時(shí)圖和交易量圖的繪制，希望對大家有所幫助2023-03-03
Vue實(shí)現(xiàn)數(shù)值型輸入框并限制長度
這篇文章主要介紹了Vue實(shí)現(xiàn)數(shù)值型輸入框并限制長度，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue通過數(shù)據(jù)過濾實(shí)現(xiàn)表格合并
這篇文章主要為大家詳細(xì)介紹了vue通過數(shù)據(jù)過濾實(shí)現(xiàn)表格合并，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
vue中實(shí)現(xiàn)上傳文件給后臺實(shí)例詳解
在本文里小編給大家分享了一篇關(guān)于vue中實(shí)現(xiàn)上傳文件給后臺的實(shí)例內(nèi)容，有需要此功能的可以學(xué)習(xí)參考下。2019-08-08
這篇文章主要介紹了詳解Vue CLI3配置解析之css.extract,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue3中的模板語法和vue指令,本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)樹形表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09