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

1. gzip 加速
2. 图片资源压缩
3. 后端配合修改

需求：要求网站内图片大小不超过 100kb！

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

gzip 加速

第一步安装依赖：

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

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

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

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

图片资源压缩

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;