vue.config.js如何配置优化图片资源压缩

需求:要求网站内图片大小不超过100kb!

项目中我们会遇到静态文件过大,上线后网页加载慢。

gzip加速

第一步安装依赖:

npm install --save-dev compression-webpack-plugin

注意:这样会安装最新的版本,如果你webpack版本过低,则会安装失败。

webpack版本过低

会提示以上内容。这里就需要降低compression-webpack-plugin版本,这里我使用的是5.0.1版本。

npm install --save--dev [email protected]

图片资源压缩

npm install --save image-webpack-loader 

使用npm安装命令后,安装失败的话需要调整:

cnpm --save install image-webpack-loader

这里就会看到gifsicle已经安装好了。

const CompressionPlugin = require("compression-webpack-plugin")
module.exports = {
chainWebpack: config => {
        //最小化代码
        config.optimization.minimize(true);
        //分割代码
        config.optimization.splitChunks({
           chunks: 'all'
        });
        //开启图片压缩
        config.module.rule('images')
          .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
          .use('image-webpack-loader')
          .loader('image-webpack-loader')
          .options({ bypassOnDebug: true })
        //开启gzip加速
        config.plugin('compressionPlugin')
          .use(new CompressionPlugin({
            test: /\.js$|\.html$|.\css$|\.otf$|\.ttf/, // 匹配文件名
            threshold: 102400, // 对超过100kb的数据压缩
            deleteOriginalAssets: false // 不删除源文件
        }))
    }, 
}

本人亲测实效(图片可以自己设置最大,我这里是设置100kb)。

后端配合修改

将nginx.conf文件中的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;

原文:点击链接

「点点赞赏,手留余香」

2

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » vue.config.js如何配置优化图片资源压缩

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们