vue生成gzip壓縮包部署到nginx的示例
更新時間：2022年12月06日 10:18:28 作者：喵喵撲
vue 生成gzip壓縮包部署到nginx服務(wù)器，如果我們把web網(wǎng)站資源進(jìn)行g(shù)zip壓縮后進(jìn)行傳輸給瀏覽器，這樣就能加快網(wǎng)站資源的加載速度，這篇文章主要介紹了vue生成gzip壓縮包部署到nginx,需要的朋友可以參考下
vue生成gzip壓縮包部署到nginx
vue 生成 gzip 壓縮包 部署到nginx服務(wù)器，加速網(wǎng)站打開速度。
gzip是GNUzip的縮寫，gzip可以被瀏覽器自動識別并解壓成原始文檔。如果我們把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ù)會被壓縮
algorithm: 'gzip', // 壓縮方式
minRatio: 0.8 // 壓縮比小于這個的才壓縮
}])
.end()
})
}
}
二、生成壓縮包
使用下面的命令生成vue的部署文件
vue-cli-service build
生成如下壓縮包：
原本瀏覽器要加載 1011kb 的數(shù)據(jù)，打包后瀏覽器只需要加載 318kb 的數(shù)據(jù)，網(wǎng)站加載速度大幅度提升。
三、服務(wù)器開啟gzip
我們在打包是生成2個同名的文件，但是請求時服務(wù)器應(yīng)該返回哪一個文件呢，如果服務(wù)器返回了.gz格式的文件就達(dá)到效果，如果服務(wù)器依然返回請求的源文件，那就達(dá)不到我們的目的了。
如果我們使用的nginx作為服務(wù)器，我們需要在 http 下面配置開啟 gzip 壓縮：
http {
...
#開啟gzip壓縮
gzip_static on;
}四、驗證是否生效
這是不開啟壓縮的效果：
這是開啟壓縮后的效果：
雖然瀏覽器顯示的大小和實際大小有出入，不過已經(jīng)達(dá)到我們想要的效果了。
到此這篇關(guān)于vue生成gzip壓縮包部署到nginx的文章就介紹到這了,更多相關(guān)vue部署gzip壓縮包到nginx內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue如何在頁面刷新時進(jìn)行重定向,文中的示例代碼簡潔易懂,具有一定的借鑒價值,有需要的小伙伴可以參考一下2025-01-01
今天小編就為大家分享一篇VUE實現(xiàn)可隨意拖動的彈窗組件，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
編程式路由在我們的項目使用過程中最常用的的方法了。這篇文章主要介紹了講解vue-router之什么是編程式路由，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹了Vue自動化注冊全局組件腳本，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要給大家介紹了關(guān)于webstorm建立vue-cli腳手架的傻瓜式教程，文中通過圖文介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
本篇文章主要介紹了vue中配置mint-ui報css錯誤問題的解決方法，非常具有實用價值，需要的朋友可以參考下2017-10-10
Vue實現(xiàn)導(dǎo)航欄的顯示開關(guān)控制
今天小編就為大家分享一篇Vue實現(xiàn)導(dǎo)航欄的顯示開關(guān)控制，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
本篇文章主要介紹了Vue自定義指令封裝節(jié)流函數(shù)的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要為大家詳細(xì)介紹了基于Vue實現(xiàn)timepicker效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
vue中實現(xiàn)當(dāng)前時間echarts圖表時間軸動態(tài)的數(shù)據(jù)(實例代碼)
這篇文章主要介紹了vue中實現(xiàn)當(dāng)前時間echarts圖表時間軸動態(tài)的數(shù)據(jù)，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-10-10