webpack 之 webpack 构建速度和体积优化的图片压缩、tree shaking、polyfill 和 webpack 打包原理的启动过程

最新推荐文章于 2025-04-16 16:39:03 发布

原创

最新推荐文章于 2025-04-16 16:39:03 发布 · 958 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #构建速度和体积优化的图片压缩 #tree shaking #polyfill #打包原理的启动过程

一、webpack 构建速度和体积优化的图片压缩、tree shaking、polyfill

图片压缩，要求是基于 Node 库的 imagemin 或者 tinypng API，使用时配置 image-webpack-loader，代码如下所示：

return {
   
   
  test: /\.(png|svg|jpg|gif|blob)$/,
  use: [{
   
   
     loader: 'file-loader',
     options: {
   
   
        name: `${
     
     filename}img/[name]${
     
     hash}.[ext]`
     }, {
   
   
       loader: 'image-webpack-loader',
       options: {
   
   
         mozjpeg: {
   
   
           progressive: true,
           quality