vue生成gzip壓縮包部署到nginx的示例
Vue webpack 項(xiàng)目自動(dòng)打包壓縮成zip文件的方法
vue生成gzip壓縮包部署到nginx
vue 生成 gzip 壓縮包 部署到nginx服務(wù)器，加速網(wǎng)站打開速度。
gzip是GNUzip的縮寫，gzip可以被瀏覽器自動(dòng)識(shí)別并解壓成原始文檔。如果我們把web網(wǎng)站資源進(jìn)行g(shù)zip壓縮后進(jìn)行傳輸給瀏覽器，這樣就能加快網(wǎng)站資源的加載速度。
一、vue打包生成gzip包
# 先安裝打包的插件 compression-webpack-plugin 6.1.1 版本，不要安裝最新的，不能正常打包
yarn add compression-webpack-plugin@6.1.1 -D
# 配置 vue.config.js
module.exports = {
...
chainWebpack(config) {
...
config
.when(process.env.NODE_ENV !== 'development', config => {
...
config
.plugin('CompressionPlugin')
.use('compression-webpack-plugin', [{
test: /\.js$|\.css$|\.html$/, // gzip壓縮規(guī)則
threshold: 10240, // 大于10K的數(shù)據(jù)會(huì)被壓縮
algorithm: 'gzip', // 壓縮方式
minRatio: 0.8 // 壓縮比小于這個(gè)的才壓縮
}])
.end()
})
}
}
二、生成壓縮包
使用下面的命令生成vue的部署文件
vue-cli-service build
生成如下壓縮包：
原本瀏覽器要加載 1011kb 的數(shù)據(jù)，打包后瀏覽器只需要加載 318kb 的數(shù)據(jù)，網(wǎng)站加載速度大幅度提升。
三、服務(wù)器開啟gzip
我們?cè)诖虬巧?個(gè)同名的文件，但是請(qǐng)求時(shí)服務(wù)器應(yīng)該返回哪一個(gè)文件呢，如果服務(wù)器返回了.gz格式的文件就達(dá)到效果，如果服務(wù)器依然返回請(qǐng)求的源文件，那就達(dá)不到我們的目的了。
如果我們使用的nginx作為服務(wù)器，我們需要在 http 下面配置開啟 gzip 壓縮：
http {
...
#開啟gzip壓縮
gzip_static on;
}四、驗(yàn)證是否生效
這是不開啟壓縮的效果：
這是開啟壓縮后的效果：
雖然瀏覽器顯示的大小和實(shí)際大小有出入，不過(guò)已經(jīng)達(dá)到我們想要的效果了。
到此這篇關(guān)于vue生成gzip壓縮包部署到nginx的文章就介紹到這了,更多相關(guān)vue部署gzip壓縮包到nginx內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue?瀏覽器本地存儲(chǔ)的問(wèn)題小結(jié)
這篇文章主要介紹了Vue?瀏覽器本地存儲(chǔ),LocalStorage 和 SessionStorage 統(tǒng)稱為 WebStorage，存儲(chǔ)大小一般支持5mb左右，但是不同的瀏覽器也有區(qū)別，具體內(nèi)容介紹跟隨小編一起看看吧2022-04-04
vue?cli3?項(xiàng)目中如何使用axios發(fā)送post請(qǐng)求
這篇文章主要介紹了vue?cli3?項(xiàng)目中如何使用axios發(fā)送post請(qǐng)求，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue項(xiàng)目如何監(jiān)聽localStorage或sessionStorage的變化
這篇文章主要介紹了vue 項(xiàng)目如何監(jiān)聽localStorage或sessionStorage的變化，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
Vue2的異步更新機(jī)制是基于JavaScript的事件循環(huán)機(jī)制實(shí)現(xiàn)的。nextTick方法則是在DOM更新后執(zhí)行回調(diào)函數(shù)。本文詳細(xì)介紹了Vue2的異步更新機(jī)制和nextTick原理，對(duì)于理解Vue2的渲染機(jī)制和優(yōu)化性能有很大的幫助。2023-04-04
axios向后臺(tái)傳遞數(shù)組作為參數(shù)的方法
今天小編就為大家分享一篇axios向后臺(tái)傳遞數(shù)組作為參數(shù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Vue3中如何使用rem來(lái)控制字體大小問(wèn)題
這篇文章主要介紹了Vue3中如何使用rem來(lái)控制字體大小問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
如何在Vue3和Vite項(xiàng)目中用SQLite數(shù)據(jù)庫(kù)進(jìn)行數(shù)據(jù)存儲(chǔ)
SQLite是一種嵌入式關(guān)系型數(shù)據(jù)庫(kù)管理系統(tǒng),是一個(gè)零配置、無(wú)服務(wù)器的、自給自足的、事務(wù)性的SQL數(shù)據(jù)庫(kù)引擎,這篇文章主要給大家介紹了關(guān)于如何在Vue3和Vite項(xiàng)目中用SQLite數(shù)據(jù)庫(kù)進(jìn)行數(shù)據(jù)存儲(chǔ)的相關(guān)資料,需要的朋友可以參考下2024-03-03
本篇文章主要介紹了Vue-cli代理解決跨域問(wèn)題，詳細(xì)的介紹了Vue如何設(shè)置代理，具有一定參考價(jià)值，有興趣的可以了解一下2017-09-09
Vue2+SpringBoot實(shí)現(xiàn)數(shù)據(jù)導(dǎo)出到csv文件并下載的使用示例
本文主要介紹了Vue2+SpringBoot實(shí)現(xiàn)數(shù)據(jù)導(dǎo)出到csv文件并下載,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-10-10
vue elementui form表單驗(yàn)證的實(shí)現(xiàn)
這篇文章主要介紹了vue elementui form表單驗(yàn)證的實(shí)現(xiàn),小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11