解決VUE打包后與nginx代理出現(xiàn)加載速度超級(jí)慢的問題
vue打包后與nginx代理出現(xiàn)加載速度超級(jí)慢
其中的原因是我們?cè)趘ue打包的過程中打包了一些沒有用的東西，造成數(shù)據(jù)量過大使得頁面加載速度超級(jí)慢的原因，
最常見的頁面加載速度就就 看板，這種頁面。
nginx部署vue項(xiàng)目加載資源慢優(yōu)化方案
問題
當(dāng)我采用nginx部署了vue的項(xiàng)目后發(fā)現(xiàn)第一次訪問網(wǎng)站需要1分左右才加載出來，打開f12檢查發(fā)現(xiàn)一個(gè)cdn引入花了40多秒，其他的10來秒的也有幾個(gè)，而我的css和js什么的才幾百kb，這要是大點(diǎn)我網(wǎng)站直接就崩了，于是研究了幾個(gè)方案，得出結(jié)論：cdn加速的文件下載到本地，本地在使用使用gzip壓縮。
解決方案推薦
gzip壓縮解壓
vue要使用gzip壓縮首先要安裝依賴
npm install --save-dev compression-webpack-plugin
但可能會(huì)打包錯(cuò)誤， 因?yàn)閏ompression的版本比node的低，安裝低版本就可以了
npm install --save-dev compression-webpack-plugin@1.0.0 //安裝低版本
1.vue項(xiàng)目的配置文件中加如下配置
// 導(dǎo)入compression-webpack-plugin
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// 定義壓縮文件類型
const productionGzipExtensions = ['js', 'css', 'png']
module.exports = {
configureWebpack: {
plugins: [
new CompressionWebpackPlugin({
asset: '[path].gz[query]', // 提示 compression-webpack-plugin@3.0.0的話asset改為filename
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 10240,
minRatio: 0.8
})
]
},
}2.nginx服務(wù)器配置
找到/etc/nginx/nginx.conf文件中http配置中添加如下內(nèi)容
gzip on;
gzip_static on;
gzip_buffers 4 16k;
gzip_comp_level 5;
gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;然后nginx -s reload 重啟一下然后訪問網(wǎng)站：
如下圖便是成功了
這時(shí)候發(fā)現(xiàn)響應(yīng)都在1秒以下，直接起飛！
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)鼠標(biāo)經(jīng)過顯示懸浮框效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)鼠標(biāo)經(jīng)過顯示懸浮框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue3.0 項(xiàng)目搭建和使用流程，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
Vue3中進(jìn)行點(diǎn)擊事件埋點(diǎn)
本文主要介紹了Vue3中進(jìn)行點(diǎn)擊事件埋點(diǎn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2026-01-01
Vue前端導(dǎo)出Excel文件的詳細(xì)實(shí)現(xiàn)方案
在開發(fā)后臺(tái)管理系統(tǒng)的時(shí)候,很多地方都要用到導(dǎo)出excel表格,比如將table中的數(shù)據(jù)導(dǎo)出到本地,下面這篇文章主要給大家介紹了關(guān)于Vue導(dǎo)出Excel文件的相關(guān)資料,需要的朋友可以參考下2021-09-09
下面小編就為大家分享一篇快速解決vue-cli不能初始化webpack模板的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue3簡(jiǎn)易實(shí)現(xiàn)proxy代理實(shí)例詳解
這篇文章主要為大家詳細(xì)介紹了Python實(shí)現(xiàn)學(xué)生成績(jī)管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要介紹了Vue3和Vue2的slot-scope插槽用法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
通過Vue?3,組合式API增強(qiáng)了我們利用Vue的能力,使我們的代碼更具模塊性和可讀性,本文主要來和大家分享10個(gè)常用的Vue3組合式API,希望對(duì)大家有所幫助2024-01-01
Vue3中引入、封裝和使用svg矢量圖的實(shí)現(xiàn)示例
SVG全稱Scalable Vector Graphics,它是網(wǎng)絡(luò)上使用最廣泛的矢量圖格式,在項(xiàng)目開發(fā)過程中,我們經(jīng)常會(huì)用到svg矢量圖,而且我們使用svg以后,頁面上加載的不再是圖片資源,本文將給大家介紹Vue3中引入、封裝和使用svg矢量圖的實(shí)現(xiàn)示例,需要的朋友可以參考下2024-07-07
vue+springmvc導(dǎo)出excel數(shù)據(jù)的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue+springmvc導(dǎo)出excel數(shù)據(jù)的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06