最细讲解前端性能优化实战第一章——image-webpack-loader 构建时压缩图片

搭建环境：Vue2，使用 vue-cli 构建

测速环境: Edge 浏览器使用网络设置低速 3G，无缓存

Vscode 使用 Live Server 插件模拟网络环境使用

目的：使用 image-webpack-loader 插件构建时压缩图片

1.安装： npm i image-webpack-loader -D

2.在Vue.config.js输入配置 如果没有该文件自行创建即可

// vue.config.js
module.exports = {
    publicPath: './',
   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()
    }

}

3.npm run build 打包图片压缩遇到问题

error:cannot find module "imagemin-gifsicle"

解决办法：

• 去 node_moudules 里删除 image-webpack-loader 文件夹

• 再运行 cnpm 命令下载 image-webpack-loader

cnpm install --save-dev  image-webpack-loader 

• 没有cpnm 可以运行这个命令下载

npm install -g cnpm@6.2.0 --registry=https://registry.npmmirror.com

• npm run build 打包成功

优化效果

• 打包前：img文件夹大小和单个图片大小及加载时间

• 打包后：img文件夹大小和单个图片大小及加载时间

可以看到文件夹从 16M 减少到 6M 减少了 10M 的大小

单个图片的加载速度和大小的优化是巨大的!

我是乔木，一个小小的B站UP主，只说真话，只做最细的教程！

同时欢迎大家加入我们的交流群一起学习 ( 吹 水 )

B站搜索【乔木真言】即可找到我

交流群：828789351

我们下期再见！