vue生成gzip壓縮包部署到nginx的示例
更新時間：2022年12月06日 10:18:28 作者：喵喵撲
vue 生成gzip壓縮包部署到nginx服務器，如果我們把web網站資源進行gzip壓縮后進行傳輸給瀏覽器，這樣就能加快網站資源的加載速度，這篇文章主要介紹了vue生成gzip壓縮包部署到nginx,需要的朋友可以參考下
vue生成gzip壓縮包部署到nginx
vue 生成 gzip 壓縮包 部署到nginx服務器，加速網站打開速度。
gzip是GNUzip的縮寫，gzip可以被瀏覽器自動識別并解壓成原始文檔。如果我們把web網站資源進行gzip壓縮后進行傳輸給瀏覽器，這樣就能加快網站資源的加載速度。
一、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ù)，網站加載速度大幅度提升。
三、服務器開啟gzip
我們在打包是生成2個同名的文件，但是請求時服務器應該返回哪一個文件呢，如果服務器返回了.gz格式的文件就達到效果，如果服務器依然返回請求的源文件，那就達不到我們的目的了。
如果我們使用的nginx作為服務器，我們需要在 http 下面配置開啟 gzip 壓縮：
http {
...
#開啟gzip壓縮
gzip_static on;
}四、驗證是否生效
這是不開啟壓縮的效果：
這是開啟壓縮后的效果：
雖然瀏覽器顯示的大小和實際大小有出入，不過已經達到我們想要的效果了。
到此這篇關于vue生成gzip壓縮包部署到nginx的文章就介紹到這了,更多相關vue部署gzip壓縮包到nginx內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue3中使用pnpm搭建monorepo開發(fā)環(huán)境
這篇文章主要為大家介紹了Vue3中使用pnpm搭建monorepo開發(fā)環(huán)境示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
props 主要用于父組件向子組件通信,再父組件中通過使用:msg='msg'綁定需要傳給子組件的屬性值,然后再在子組件中用props接收該屬性值,這篇文章主要介紹了vue3的組件通信&v-model使用,需要的朋友可以參考下2024-05-05
這篇文章主要為大家詳細介紹了Vue.js路由vue-router使用方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了vue-editor-bridge報錯的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue 項目中的this.$get,this.$post等$的用法案例詳解
vue.js的插件應該暴露一個install方法。這個方法的第一個參數(shù)是vue構造器，第二個參數(shù)是一個可選的選項對象，首頁要安裝axios，本文結合案例代碼給大家詳細講解vue 中的this.$get,this.$post等$的用法，一起學習下吧2022-12-12
這篇文章主要介紹了使用el-form-item設置標簽長度方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue+axios實現(xiàn)文件下載及vue中使用axios的實例
這篇文章主要介紹了vue+axios實現(xiàn)文件下載及vue中使用axios的實例,需要的朋友可以參考下2018-09-09
vue?elementui二次封裝el-table帶插槽問題
這篇文章主要介紹了vue?elementui二次封裝el-table帶插槽問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家介紹了vue項目里的權限控制，文中有詳細的代碼示例供大家參考，有需要的朋友可以借鑒參考下，希望能夠有所幫助2023-06-06
前端vue+express實現(xiàn)文件的上傳下載示例
本文主要介紹了前端vue+express實現(xiàn)文件的上傳下載示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12