生成gizp打包资源可以优化页面加载速度

打包时候开启gzip可以很大程度减少包的大小页面大小可以变为原来的30%甚至更小,非常适合线上部署, 但还记得需要服务端支持

1、前端配置compressionwebpackplugin

安装npm install compression-webpack-plugin
安装版本需要注意,根据自己webpack版本来定,尽量匹配

01、vue.config.jsvuecli

/* 第一种方式 */
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const plugins = [...]
if (isProduction) {
    plugins.push(
        new CompressionWebpackPlugin({
            filename: '[path].gz[query]',
            algorithm: 'gzip',
            test: new RegExp('.(' + ['html', 'js', 'css'].join('|') + ')$'),
            threshold: 10240, // 只有大小大于该值的资源会被处理 10240
            minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
            deleteOriginalAssets: false // 删除原文
        })
    )
}
module.exports = {
 configureWebpack: {
        resolve: {
            alias: {
                '@': resolve('./src')
            }
        },
        plugins
    },
}
 

02、 在vuecli中,configureWebpack 返回函数写法

/* 第二种方式 */
// configureWebpack 返回函数式写法
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const isProduction = process.env.NODE_ENV !== 'development'
module.exports = {
...
configureWebpack: (config) => {
        config.plugins.push(
            new HardSourcePlugin()
        )
        // 其他配置
        Object.assign(config.resolve, {
            alias: {
                '@': resolve('./src')
            }
        })
        // 为生产环境修改配置
        if (isProduction) {
            config.plugins.push(
                new CompressionWebpackPlugin({
                    filename: '[path].gz[query]',
                    algorithm: 'gzip',
                    test: new RegExp('.(' + ['html', 'js', 'css'].join('|') + ')$'),
                    threshold: 10240, // 只有大小大于该值的资源会被处理 10240
                    minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
                    deleteOriginalAssets: false // 删除原文
                })
            )
        }
    },
 
}
 
// webpack.config.jswebpack搭建项目
const CompressionWebpackPlugin = require('compression-webpack-plugin')
module.exports = {
   mode: 'development',
   ...
   plugins: [
     new CompressionWebpackPlugin({
                    filename: '[path].gz[query]',
                    algorithm: 'gzip',
                    test: new RegExp('.(' + ['html', 'js', 'css'].join('|') + ')$'),
                    threshold: 10240, // 只有大小大于该值的资源会被处理 10240
                    minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
                    deleteOriginalAssets: false // 删除原文
                })
   ]

2、服务端配置, 以nginx为例

服务端 Nginx开启 gzip_static 功能;
nginx.confserver模块加入以下代码:

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;
}

以上
对于支持gzip的浏览器, 配置成功请求头中会包含: Accept-Encoding: gzip, deflate
服务器响应时 在响应头中显示: Content-Encoding: gzip

原文地址:https://blog.csdn.net/weixin_52443895/article/details/134179097

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_44598.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注