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í)際大小有出入，不過已經(jīng)達(dá)到我們想要的效果了。
到此這篇關(guān)于vue生成gzip壓縮包部署到nginx的文章就介紹到這了,更多相關(guān)vue部署gzip壓縮包到nginx內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3中使用pnpm搭建monorepo開發(fā)環(huán)境
這篇文章主要為大家介紹了Vue3中使用pnpm搭建monorepo開發(fā)環(huán)境示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
props 主要用于父組件向子組件通信,再父組件中通過使用:msg='msg'綁定需要傳給子組件的屬性值,然后再在子組件中用props接收該屬性值,這篇文章主要介紹了vue3的組件通信&v-model使用,需要的朋友可以參考下2024-05-05
這篇文章主要為大家詳細(xì)介紹了Vue.js路由vue-router使用方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
vue-editor-bridge報(bào)錯(cuò)的解決方案
這篇文章主要介紹了vue-editor-bridge報(bào)錯(cuò)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue 項(xiàng)目中的this.$get,this.$post等$的用法案例詳解
vue.js的插件應(yīng)該暴露一個(gè)install方法。這個(gè)方法的第一個(gè)參數(shù)是vue構(gòu)造器，第二個(gè)參數(shù)是一個(gè)可選的選項(xiàng)對(duì)象，首頁(yè)要安裝axios，本文結(jié)合案例代碼給大家詳細(xì)講解vue 中的this.$get,this.$post等$的用法，一起學(xué)習(xí)下吧2022-12-12
使用el-form-item設(shè)置標(biāo)簽長(zhǎng)度
這篇文章主要介紹了使用el-form-item設(shè)置標(biāo)簽長(zhǎng)度方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue+axios實(shí)現(xiàn)文件下載及vue中使用axios的實(shí)例
這篇文章主要介紹了vue+axios實(shí)現(xiàn)文件下載及vue中使用axios的實(shí)例,需要的朋友可以參考下2018-09-09
vue?elementui二次封裝el-table帶插槽問題
這篇文章主要介紹了vue?elementui二次封裝el-table帶插槽問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
一篇帶你搞懂Vue項(xiàng)目里的權(quán)限控制
這篇文章主要為大家介紹了vue項(xiàng)目里的權(quán)限控制，文中有詳細(xì)的代碼示例供大家參考，有需要的朋友可以借鑒參考下，希望能夠有所幫助2023-06-06
前端vue+express實(shí)現(xiàn)文件的上傳下載示例
本文主要介紹了前端vue+express實(shí)現(xiàn)文件的上傳下載示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12