Vue配置compression-webpack-plugin實現(xiàn)Gzip壓縮

1、為什么要壓縮？
打包的時候開啟gzip可以很大程度減少包的大小，頁面大小可以變?yōu)樵瓉淼?0%甚至更小，非常適合于上線部署。更小的體積對于用戶體驗來說就意味著更快的加載速度以及更好的用戶體驗
2、為什么gzip壓縮后頁面加載速度提升
瀏覽器向服務(wù)器發(fā)出請求，并且在請求頭中聲明可以使用gzip的編碼格式，服務(wù)器接受到請求之后，讀取壓縮后的文件，服務(wù)器直接返回給瀏覽器gzip格式的文件，瀏覽器進(jìn)行解壓縮，這樣以來就節(jié)省了服務(wù)器壓縮的時間
3、如何配置
（1）安裝依賴

npm i -D compression-webpack-plugin

（2）配置webpack

const compressionPlugin = require('compression-webpack-plugin');
module.exports = {
    devServer: {
        proxy: 'http://10.30.23.207:7000' //開發(fā)環(huán)境的跨域問題解決，后端服務(wù)ip 和 端口
    },
    pages: {
        index: {
            // page 的入口
            entry: 'src/gisEasy7MapPluginMain.js',
            // 模板來源
            template: 'public/index.html',
            // 輸出文件名
            filename: 'index.html'
        }
    },
    publicPath: './',
    assetsDir: 'plugins/TdPluginDeviceGis/web',
    lintOnSave: false,
    productionSourceMap: true,
    filenameHashing: process.env.NODE_ENV === 'production' ? false : true,
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            return {
                plugins: [
                    new compressionPlugin({
                        test: /\.js$|\.html$|\.css/,
                        threshold: 10240,
                        deleteOriginalAssets: false
                    })
                ],
                output: {
                    jsonpFunction: 'TdPluginDeviceGis'
                }
            };
        }
    }
};

(3) npm run build 打包

打包后發(fā)現(xiàn) 生成.gz壓縮包
（4）配置nginx
服務(wù)端 Nginx 需開啟 gzip_static 功能;

server{
    //開啟和關(guān)閉gzip模式
	gzip on;
	//gizp壓縮起點(diǎn)，文件大于2k才進(jìn)行壓縮;設(shè)置允許壓縮的頁面最小字節(jié)數(shù)，頁面字節(jié)數(shù)從header頭得content-length中進(jìn)行獲取。 默認(rèn)值是0，不管頁面多大都壓縮。建議設(shè)置成大于2k的字節(jié)數(shù)，小于2k可能會越壓越大。
	gzip_min_length 2k;
	// 設(shè)置壓縮所需要的緩沖區(qū)大小，以4k為單位，如果文件為7k則申請2*4k的緩沖區(qū) 
	gzip_buffers 4 16k;
	// 設(shè)置gzip壓縮針對的HTTP協(xié)議版本
	gzip_http_version 1.0;
	// gzip 壓縮級別，1-9，數(shù)字越大壓縮的越好，也越占用CPU時間
	gzip_comp_level 2;
	//進(jìn)行壓縮的文件類型
	gzip_types text/plain application/javascript text/css application/xml;
	// 是否在http header中添加Vary: Accept-Encoding，建議開啟
	gzip_vary on;
}

（5）訪問
資源發(fā)布到服務(wù)器，在請求中可以看到
文章來源地址http://www.zghlxwxcb.cn/news/detail-585463.html

到了這里，關(guān)于webpack插件compression-webpack-plugin的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！