vue生成gzip壓縮包部署到nginx的示例
更新時間：2022年12月06日 10:18:28 作者：喵喵撲
vue 生成gzip壓縮包部署到nginx服務器，如果我們把web網(wǎng)站資源進行gzip壓縮后進行傳輸給瀏覽器，這樣就能加快網(wǎng)站資源的加載速度，這篇文章主要介紹了vue生成gzip壓縮包部署到nginx,需要的朋友可以參考下
vue生成gzip壓縮包部署到nginx
vue 生成 gzip 壓縮包 部署到nginx服務器，加速網(wǎng)站打開速度。
gzip是GNUzip的縮寫，gzip可以被瀏覽器自動識別并解壓成原始文檔。如果我們把web網(wǎng)站資源進行gzip壓縮后進行傳輸給瀏覽器，這樣就能加快網(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)站加載速度大幅度提升。
三、服務器開啟gzip
我們在打包是生成2個同名的文件，但是請求時服務器應該返回哪一個文件呢，如果服務器返回了.gz格式的文件就達到效果，如果服務器依然返回請求的源文件，那就達不到我們的目的了。
如果我們使用的nginx作為服務器，我們需要在 http 下面配置開啟 gzip 壓縮：
http {
...
#開啟gzip壓縮
gzip_static on;
}四、驗證是否生效
這是不開啟壓縮的效果：
這是開啟壓縮后的效果：
雖然瀏覽器顯示的大小和實際大小有出入，不過已經(jīng)達到我們想要的效果了。
到此這篇關于vue生成gzip壓縮包部署到nginx的文章就介紹到這了,更多相關vue部署gzip壓縮包到nginx內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關文章
這篇文章主要介紹了Vue?瀏覽器本地存儲,LocalStorage 和 SessionStorage 統(tǒng)稱為 WebStorage，存儲大小一般支持5mb左右，但是不同的瀏覽器也有區(qū)別，具體內容介紹跟隨小編一起看看吧2022-04-04
vue?cli3?項目中如何使用axios發(fā)送post請求
這篇文章主要介紹了vue?cli3?項目中如何使用axios發(fā)送post請求，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue項目如何監(jiān)聽localStorage或sessionStorage的變化
這篇文章主要介紹了vue 項目如何監(jiān)聽localStorage或sessionStorage的變化，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
Vue2的異步更新機制是基于JavaScript的事件循環(huán)機制實現(xiàn)的。nextTick方法則是在DOM更新后執(zhí)行回調函數(shù)。本文詳細介紹了Vue2的異步更新機制和nextTick原理，對于理解Vue2的渲染機制和優(yōu)化性能有很大的幫助。2023-04-04
今天小編就為大家分享一篇axios向后臺傳遞數(shù)組作為參數(shù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了Vue3中如何使用rem來控制字體大小問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
如何在Vue3和Vite項目中用SQLite數(shù)據(jù)庫進行數(shù)據(jù)存儲
SQLite是一種嵌入式關系型數(shù)據(jù)庫管理系統(tǒng),是一個零配置、無服務器的、自給自足的、事務性的SQL數(shù)據(jù)庫引擎,這篇文章主要給大家介紹了關于如何在Vue3和Vite項目中用SQLite數(shù)據(jù)庫進行數(shù)據(jù)存儲的相關資料,需要的朋友可以參考下2024-03-03
本篇文章主要介紹了Vue-cli代理解決跨域問題，詳細的介紹了Vue如何設置代理，具有一定參考價值，有興趣的可以了解一下2017-09-09
Vue2+SpringBoot實現(xiàn)數(shù)據(jù)導出到csv文件并下載的使用示例
本文主要介紹了Vue2+SpringBoot實現(xiàn)數(shù)據(jù)導出到csv文件并下載,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-10-10
vue elementui form表單驗證的實現(xiàn)
這篇文章主要介紹了vue elementui form表單驗證的實現(xiàn),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11