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

最新推荐文章于 2025-05-11 17:07:29 发布

城南花开ze

最新推荐文章于 2025-05-11 17:07:29 发布

阅读量919

点赞数

分类专栏： Webpack、Vite、Gulp 文章标签： webpack 构建速度和体积优化的图片压缩 tree shaking polyfill 打包原理的启动过程

本文链接：https://blog.youkuaiyun.com/weixin_42614080/article/details/124080206

版权

一、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: 65
         }