vue 优化之图片压缩遇到的坑

130 阅读 0 评论 86 点赞

我是靠谱客的博主留胡子白开水，这篇文章主要介绍vue 优化之图片压缩遇到的坑，现在分享给大家，希望可以做个参考。

vue2.x版本和 vue4.x版本关于图片压缩的配置是不同的

vue2.x版本的配置文件(vue.config.js:没有自行创建),如下

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
module.exports = {
    chainWebpack: config => {
        config.module
            .rule('min-image')
            .test(/.(png|jpe?g|gif)(?.*)?$/)
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options({ disable: process.env.NODE_ENV == 'development' ? true : false })//此处为ture的时                            候不会启用压缩处理,目的是为了开发模式下调试速度更快,网上错误示例直接写为disable:true,如果不去查看文档肯定是要被坑的
            .end()
    }
}

vue4.x版本的配置文件(vue.config.js:没有自行创建),如下

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
webpackConfig => {
    webpackConfig.module
        .rule('images')
        .test(/.(png|jpe?g|gif|webp)(?.*)?$/)
        .use('url-loader')
        .loader(require.resolve('url-loader'))
        .options({
            limit: 4096,
            fallback: {
                loader: require.resolve('file-loader'),
                options: {
                    name: `static/img[name].[hash:8].[ext]`
                }
            }
        })
    }

否则会报如下错误:Error: Cannot find module ‘gifsicle’
在这里插入图片描述
参考链接:https://www.jianshu.com/p/59a8ebe38255
参考链接:https://blog.csdn.net/qq_27009517/article/details/119248862