webpack插件compression-webpack-plugin

Vue配置compression-webpack-plugin实现Gzip压缩

1、为什么要压缩?

打包的时候开启gzip可以很大程度减少包的大小,页面大小可以变为原来的30%甚至更小,非常适合于上线部署。更小的体积对于用户体验来说就意味着更快的加载速度以及更好的用户体验

2、为什么gzip压缩后页面加载速度提升

浏览器向服务器发出请求,并且在请求头中声明可以使用gzip的编码格式,服务器接受到请求之后,读取压缩后的文件,服务器直接返回给浏览器gzip格式的文件,浏览器进行解压缩,这样以来就节省了服务器压缩的时间

3、如何配置

(1)安装依赖

复制代码
npm i -D compression-webpack-plugin

(2)配置webpack

javascript 复制代码
const compressionPlugin = require('compression-webpack-plugin');
module.exports = {
    devServer: {
        proxy: 'http://10.30.23.207:7000' //开发环境的跨域问题解决,后端服务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 打包

打包后发现 生成.gz压缩包

(4)配置nginx

服务端 Nginx 需开启 gzip_static 功能;

javascript 复制代码
server{
    //开启和关闭gzip模式
	gzip on;
	//gizp压缩起点,文件大于2k才进行压缩;设置允许压缩的页面最小字节数,页面字节数从header头得content-length中进行获取。 默认值是0,不管页面多大都压缩。建议设置成大于2k的字节数,小于2k可能会越压越大。
	gzip_min_length 2k;
	// 设置压缩所需要的缓冲区大小,以4k为单位,如果文件为7k则申请2*4k的缓冲区 
	gzip_buffers 4 16k;
	// 设置gzip压缩针对的HTTP协议版本
	gzip_http_version 1.0;
	// gzip 压缩级别,1-9,数字越大压缩的越好,也越占用CPU时间
	gzip_comp_level 2;
	//进行压缩的文件类型
	gzip_types text/plain application/javascript text/css application/xml;
	// 是否在http header中添加Vary: Accept-Encoding,建议开启
	gzip_vary on;
}

(5)访问

资源发布到服务器,在请求中可以看到

相关推荐
耶啵奶膘1 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家2 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689972 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽4 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头4 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全5 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing5 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆5 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding6 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
前端开发与ui设计的老司机6 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui