解決VUE打包后與nginx代理出現(xiàn)加載速度超級(jí)慢的問(wèn)題

更新時(shí)間：2023年09月28日 14:56:46 作者：其妙的太空人

這篇文章主要介紹了解決VUE打包后與nginx代理出現(xiàn)加載速度超級(jí)慢的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue打包后與nginx代理出現(xiàn)加載速度超級(jí)慢

其中的原因是我們?cè)趘ue打包的過(guò)程中打包了一些沒(méi)有用的東西，造成數(shù)據(jù)量過(guò)大使得頁(yè)面加載速度超級(jí)慢的原因，

最常見(jiàn)的頁(yè)面加載速度就就看板，這種頁(yè)面。

nginx部署vue項(xiàng)目加載資源慢優(yōu)化方案

問(wèn)題

當(dāng)我采用nginx部署了vue的項(xiàng)目后發(fā)現(xiàn)第一次訪問(wèn)網(wǎng)站需要1分左右才加載出來(lái)，打開(kāi)f12檢查發(fā)現(xiàn)一個(gè)cdn引入花了40多秒，其他的10來(lái)秒的也有幾個(gè)，而我的css和js什么的才幾百kb，這要是大點(diǎn)我網(wǎng)站直接就崩了，于是研究了幾個(gè)方案，得出結(jié)論：cdn加速的文件下載到本地，本地在使用使用gzip壓縮。

解決方案推薦

gzip壓縮解壓

vue要使用gzip壓縮首先要安裝依賴(lài)

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')
// 定義壓縮文件類(lèi)型
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èn)網(wǎng)站：

如下圖便是成功了

這時(shí)候發(fā)現(xiàn)響應(yīng)都在1秒以下，直接起飛！

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue中前端如何實(shí)現(xiàn)pdf預(yù)覽功能(含vue-pdf插件用法)
這篇文章主要給大家介紹了vue中前端如何實(shí)現(xiàn)pdf預(yù)覽功能的相關(guān)資料,文中包含vue-pdf插件用法,在前端開(kāi)發(fā)中,很多時(shí)候我們需要進(jìn)行pdf文件的預(yù)覽操作,需要的朋友可以參考下
2023-07-07
解決vue-router中的query動(dòng)態(tài)傳參問(wèn)題
下面小編就為大家分享一篇解決vue-router中的query動(dòng)態(tài)傳參問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
vite+vue3+element-plus搭建項(xiàng)目的踩坑記錄
這篇文章主要介紹了vite+vue3+element-plus搭建項(xiàng)目的踩坑記錄,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
Nuxt.js踩坑總結(jié)分享
本篇文章主要介紹了Nuxt.js踩坑總結(jié)分享，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-01-01
vue實(shí)現(xiàn)輪播圖幀率播放
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)輪播圖幀率播放，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-01-01
Vue實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建和刪除數(shù)據(jù)的方法
下面小編就為大家分享一篇Vue實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建和刪除數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-03-03
詳解在vue-cli中使用graphql即vue-apollo的用法
這篇文章主要介紹了詳解在vue-cli中使用graphql即vue-apollo的用法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
vue3+arco design通過(guò)動(dòng)態(tài)表單方式實(shí)現(xiàn)自定義篩選功能
這篇文章主要介紹了vue3+arco design通過(guò)動(dòng)態(tài)表單方式實(shí)現(xiàn)自定義篩選,本文主要實(shí)現(xiàn)通過(guò)動(dòng)態(tài)表單的方式實(shí)現(xiàn)自定義篩選的功能,用戶可以自己添加篩選的項(xiàng)目,篩選條件及篩選內(nèi)容,需要的朋友可以參考下
2024-05-05
Vue-Router基礎(chǔ)學(xué)習(xí)筆記(小結(jié))
這篇文章主要介紹了Vue-Router基礎(chǔ)學(xué)習(xí)筆記(小結(jié))，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-10-10
詳解vue-router 動(dòng)態(tài)路由下子頁(yè)面多頁(yè)共活的解決方案
這篇文章主要介紹了vue-router 動(dòng)態(tài)路由下子頁(yè)面多頁(yè)共活的解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12