记一次打包优化过程，从5M到150kB，7秒到200毫秒最近发现公司有两个项目的首屏加载速度很慢，第一次打开网页要10S

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天

最近发现公司有两个项目的首屏加载速度很慢，第一次打开网页要10S左右，这怎么能忍，于是下定决心查一查是什么原因，先打开f12看看到底是哪个请求耗时多

第一个项目有张图片有1.9M，耗时竟然占了8.94S，这个必须优化

第二个项目打包出来的JS文件竟然一个5.8M一个3M，加起来耗时用了12s，罪魁祸首就是它两了

优化结果

先看下最后的优化结果

我是从打包后的压缩图片和压缩文件两个方面进行优化的，整个过程如下

方案1：图片压缩-手动

手动把图片在压缩网站压缩替换，看下压缩到1M会不会快一点

可以看到耗时从8.94s提高到了1.54s，竟然提高了这么多，不知道是不是网络原因，但是减小打包体积能加快加载，这个是共识的，但是手动压缩总不是办法，所以进一步优化我们需要用到图片压缩插件

方案2：图片压缩-webpack插件

使用插件image-webpack-loader对所有使用到的静态资源图片进行压缩

vue.config.js（vue-cli3）加上这个配置

chainWebpack(webpackConfig) {
    // 压缩图片
    webpackConfig.module
      .rule('images')
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({ bypassOnDebug: true })
      .end()
}

重新打包

插件会在打包时对图片进行压缩，可以看到1.9M的图片被压缩到了1.4M，虽然压缩效果不如手动压缩的好，但是插件的好处是会对所有用到的静态资源图片进行压缩，整体也是起到了打包优化的效果。

另外有各种配置，可以调整我们要压缩后图片的质量

chainWebpack(webpackConfig) {
    // 压缩图片
    webpackConfig.module
      .rule('images')
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({ 
          mozjpeg: { progressive: true, quality: 50 }, // 压缩JPEG图像 
          optipng: { enabled: true }, // 压缩PNG图像 
          pngquant: { quality: [0.5, 0.65], speed: 4 }, // 压缩PNG图像 
          gifsicle: { interlaced: false } // 压缩GIF图像 
      })
      .end()
}