阅读 523
Vue 项目配置 image-webpack-loader

Vue 项目配置 image-webpack-loader

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

image-webpack-loader 是什么?

github:image-webpack-loader

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

如何使用?

安装

$ npm install image-webpack-loader
复制代码

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

配置

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.png

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

image.png

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

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

文章分类
前端
文章标签