前端性能優化Gzip

前言

以前前端性能優化的接觸的比較少，隨着項目的增大，性能問題就出來了，以前想到的性能優化是減小Http請求，可是這並非單單能本身控制的，這要涉及到業務和後端邏輯也很差更改，想到以前跟着大佬作項目用到了Gzip，就想來學習一下。

GZIP就是經過HTTP壓縮來優化性能，HTTP壓縮能夠大大提升瀏覽網站的速度，它的原理是，在客戶端請求服務器對應資源後，從服務器端將資源文件壓縮，再輸出到客戶端，由客戶端的瀏覽器負責解壓縮並瀏覽。

vue項目配置

用vue-cli搭建的項目會配置有Gzip，只須要更改一下配置文件和安裝一下依賴就可使用了.

<!--config/index.js-->
    productionGzip: true, //是否開啓Gzip壓縮
    productionGzipExtensions: ["js", "css"],
複製代碼

留意一下備註哦

<!--build/webpack.prod.conf.js-->
    // 若是在../config/index.js中開啓了Gzip ,記得安裝npm install compression-webpack-plugin --save-dev
if (config.build.productionGzip) {
    const CompressionWebpackPlugin = require('compression-webpack-plugin')
    webpackConfig.plugins.push(
        new CompressionWebpackPlugin({
            filename: '[path].gz[query]', // 以前這屬性是asset,打包會報錯 改爲filename
            algorithm: 'gzip',
            test: new RegExp(
                '\\.(' + config.build.productionGzipExtensions.join('|') + ')$'
            ),
            threshold: 10240,
            minRatio: 0.8
        })
    )
}
複製代碼

配好上面兩個文件，前端的基本就能夠了，可是百度百科說到，打包可能會報錯，有多是由於這個依賴compression-webpack-plugin的版本問題，卸載這個依賴在從新安裝其餘版本的就能夠了。 好了，咱們來npm run build一下 ， 咱們能夠看到會比以前多出一些gz文件

再來dist文件夾看下，能夠看到壓縮後會比以前的文件小好多。

tomcat 服務端

接下來就是配服務器了，可是我不會啊。。。這位大佬寫的比較全面，tomcat的能夠去看一下。

nginx 服務端

若是是nginx 服務的，找到nginx配置文件在 http 配置裏面添加以下代碼，而後重啓nginx服務便可。

http:{ 

      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;

}
複製代碼

vue開啓gzip性能優化主要分爲兩部分。記錄一下以防忘記。哈哈，掘金是個好東西。