最近开发 Vue 项目的时候部署上线越发觉得 dist 包越来越大，通过一步步的排查，才确定了是图片静态资源太大了！虽然可以通过 url-loader 把图片文件转换为 base64，但是这种方式仅适合于比较小的图片资源，如果一个图片文件很大这样又会导致构建出的 .js 文件加载缓慢。

image-webpack-loader 是什么？

github：image-webpack-loader

简单说 image-webpack-loader 就是一个能把图片资源压缩到一定大小的 loader ！

如何使用？

安装

$ npm install image-webpack-loader

这里不得不提一下安装的时候是真费劲，如果你构建包的时候发生了报错可能是安装的时候因为 npm 是请求国外服务器，可能导致没有安装完全或者安装过程出错误。 这就需要你卸载然后使用 cnpm 或 yarn 安装来试试。

配置

module.exports = {
    // ... 其他的一些配置
    // 关于 chainWebpack 的使用，请看 Vue Cli 文档
    // https://cli.vuejs.org/zh/guide/webpack.html#%E9%93%BE%E5%BC%8F%E6%93%8D%E4%BD%9C-%E9%AB%98%E7%BA%A7
    chainWebpack: config => {
        config.module
            .rule('image')
            .test(/\.(png|jpe?g|gif)(\?.*)?$/)
            .use('image-webpack-loader')
            .loader('image-webpack-loader')
            .options({
                // 此处为ture的时候不会启用压缩处理,目的是为了开发模式下调试速度更快
                disable: process.env.NODE_ENV == 'development' ? true : false
            })
            .end()
    }
}

如果你需要更多的参数配置，请点击这里！

image-webpack-loader 是需要配合 file-loader 来使用的。不过，Vue Cli 搭建的项目中已经内置了 file-loader 就不需要我们进行额外安装配置了！

测试

首先看一下没有配置 image-webpack-loader 的图片加载情况

首次进入页面的时候，可以看到一张 3.8MB 的图片竟然加载了 1.6 分钟（和我当前的网络有一定关系）！

然后再来看一下配置 image-webpack-loader 后加载图片的效果吧

压缩后首次进入页面可以很明显的看到图片加载的时间变短了。

这也算一种简单的性能优化方案吧！