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)访问

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

相关推荐
web守墓人43 分钟前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L1 小时前
CSS知识复习5
前端·css
许白掰1 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子5 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
中微子6 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则7 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4538 小时前
React移动端开发项目优化
前端·react.js·前端框架
你的人类朋友8 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维
web_Hsir8 小时前
vue3.2 前端动态分页算法
前端·算法