webpack系列 —— 性能优化篇

最新推荐文章于 2024-11-07 16:40:30 发布

前端_七月

最新推荐文章于 2024-11-07 16:40:30 发布

阅读量533

点赞数 1

CC 4.0 BY-SA版权

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.csdn.net/weixin_41319237/article/details/120513644

本文主要介绍了webpack的性能优化策略，包括使用image-webpack-loader和url-loader压缩图片，利用optimize-css-assets-webpack-plugin压缩CSS，通过Tree Shaking移除未引用的JS代码，配置UglifyJs进一步压缩代码，以及通过mini-css-extract-plugin分离CSS文件，实现动态加载以提升页面加载速度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一压缩图片和css

压缩图片

image-webpack-loader 来压缩图片文件

// image-webpack-loader 使用 imagemin 来进行压缩
use: [
    'file-loader', // 需要在file-loader之后添加 image-webpack-loader
    {
   
      loader:  'image-webpack-loader',
        options: {
   
            // 压缩 jpg
            mozjpeg: {
   
              progressive:  true,
            },
            // 压缩 png
            optipng: {
   
              enabled:  false,  // 可以使用enabled：false来禁用优化器
            },
            // 压缩 png
            pngquant: {
   
              quality: [0.65, 0.90], // 达到或超过最大质量所需的最少颜色数量
              speed:  4
            },
            // 压缩 gif
            gifsicle: {
   
              interlaced:  false, // 渐进式渲染
            },
            // 压缩 jpg 和 png为 webp
            webp: {
   
              quality:  75 // 压缩质量
            }
         }
    }
]