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

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

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

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

其中的原因是我們在vue打包的過程中打包了一些沒有用的東西，造成數(shù)據(jù)量過大使得頁面加載速度超級慢的原因，

最常見的頁面加載速度就就看板，這種頁面。

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

問題

當我采用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項目的配置文件中加如下配置

// 導入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服務器配置

找到/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)站：

如下圖便是成功了