解決VUE打包后與nginx代理出現(xiàn)加載速度超級慢的問題
vue打包后與nginx代理出現(xiàn)加載速度超級慢
其中的原因是我們在vue打包的過程中打包了一些沒有用的東西，造成數(shù)據(jù)量過大使得頁面加載速度超級慢的原因，
最常見的頁面加載速度就就 看板，這種頁面。
nginx部署vue項目加載資源慢優(yōu)化方案
問題
當(dāng)我采用nginx部署了vue的項目后發(fā)現(xiàn)第一次訪問網(wǎng)站需要1分左右才加載出來，打開f12檢查發(fā)現(xiàn)一個cdn引入花了40多秒，其他的10來秒的也有幾個，而我的css和js什么的才幾百kb，這要是大點我網(wǎng)站直接就崩了，于是研究了幾個方案，得出結(jié)論：cdn加速的文件下載到本地，本地在使用使用gzip壓縮。
解決方案推薦
gzip壓縮解壓
vue要使用gzip壓縮首先要安裝依賴
npm install --save-dev compression-webpack-plugin
但可能會打包錯誤， 因為compression的版本比node的低，安裝低版本就可以了
npm install --save-dev compression-webpack-plugin@1.0.0 //安裝低版本
1.vue項目的配置文件中加如下配置
// 導(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)站：
如下圖便是成功了
這時候發(fā)現(xiàn)響應(yīng)都在1秒以下，直接起飛！
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue中前端如何實現(xiàn)pdf預(yù)覽功能(含vue-pdf插件用法)
這篇文章主要給大家介紹了vue中前端如何實現(xiàn)pdf預(yù)覽功能的相關(guān)資料,文中包含vue-pdf插件用法,在前端開發(fā)中,很多時候我們需要進(jìn)行pdf文件的預(yù)覽操作,需要的朋友可以參考下2023-07-07
解決vue-router中的query動態(tài)傳參問題
下面小編就為大家分享一篇解決vue-router中的query動態(tài)傳參問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vite+vue3+element-plus搭建項目的踩坑記錄
這篇文章主要介紹了vite+vue3+element-plus搭建項目的踩坑記錄,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
本篇文章主要介紹了Nuxt.js踩坑總結(jié)分享，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)輪播圖幀率播放，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
Vue實現(xiàn)動態(tài)創(chuàng)建和刪除數(shù)據(jù)的方法
下面小編就為大家分享一篇Vue實現(xiàn)動態(tài)創(chuàng)建和刪除數(shù)據(jù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
詳解在vue-cli中使用graphql即vue-apollo的用法
這篇文章主要介紹了詳解在vue-cli中使用graphql即vue-apollo的用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
vue3+arco design通過動態(tài)表單方式實現(xiàn)自定義篩選功能
這篇文章主要介紹了vue3+arco design通過動態(tài)表單方式實現(xiàn)自定義篩選,本文主要實現(xiàn)通過動態(tài)表單的方式實現(xiàn)自定義篩選的功能,用戶可以自己添加篩選的項目,篩選條件及篩選內(nèi)容,需要的朋友可以參考下2024-05-05
Vue-Router基礎(chǔ)學(xué)習(xí)筆記(小結(jié))
這篇文章主要介紹了Vue-Router基礎(chǔ)學(xué)習(xí)筆記(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
詳解vue-router 動態(tài)路由下子頁面多頁共活的解決方案
這篇文章主要介紹了vue-router 動態(tài)路由下子頁面多頁共活的解決方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12