高级篇：webpack应用指南二

最新推荐文章于 2023-10-30 16:01:44 发布
原创 最新推荐文章于 2023-10-30 16:01:44 发布 · 357 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#webpack #前端 #javascript

webpack应用指南二（高级篇）


根据尚硅谷视频教程及webpack5官网部分内容整理。
尚硅谷Web前端之Webpack5教程文档
Webpack中文官网

减少代码体积

减少Babel生成文件的体积*

Babel为编译的每个文件都插入了辅助代码，使代码体积过大。Babel对一些公共方法使用了非常小的辅助代码，比如 _extend。默认情况下会被添加到每一个需要它的文件中。所以可以将这些辅助代码作为一个独立模块，来避免重复引入。
使用插件@babel/plugin-transform-runtime，该插件禁用了Babel自动对每个文件的runtime注入，引入@babel/plugin-transform-runtime并且使所有辅助代码从这里引用。配置时在babel-loader的“plugins”属性中引入该插件，配置方式如下。
安装插件@babel/plugin-transform-runtime：npm i @babel/plugin-transform-runtime -D

// webpack.dev.js/webpack.prod.js
...

module.exports = {...},
  // 模块
  module: {
    rules: [
      {
        oneOf: [
          {...},
          {...},
          {...},
          {...},
          {
            test: /\.m?js$/,
            exclude: /(node_modules|bower_components)/,
            use: [
              {
                loader: "thread-loader", // 开启多进程
                options: {
                  workers: threads, // 数量
                },
              },
              {
                loader: 'babel-loader',
                options: {
                  cacheDirectory: true, // 开启babel编译缓存
                  cacheCompression: false, // 缓存文件不要压缩
                  plugins: ['@babel/plugin-transform-runtime'], // 减少babel体积
                }
              },
            ]
          }
        ]
      }
    ]
  },
  ...
};

压缩图片【生产环境】

开发如果项目中引用了较多图片，那么图片体积会比较大，将来请求速度比较慢。可以对图片进行压缩，减少图片体积。
注意：如果项目中图片都是在线链接，那么就不需要了。本地项目静态图片才需要进行压缩。
image-minimizer-webpack-plugin：用来压缩图片的插件。
安装：npm i image-minimizer-webpack-plugin imagemin -D。
此外，还需要其他依赖包进行下载，分为无损模式和有损模式。

  • 无损压缩：npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -D
  • 有损压缩：npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo -D
    以无损模式配置为例，配置方式如下。
// webpack.prod.js
...
// 引入图片压缩文件
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");

const threads = os.cpus().length-1;

function getCommonStyleSets(pre) {...}

module.exports = {
  // 入口
  entry: './src/main.js',
  // 输出
  output: {...},
  // 模块
  module: {...},
  // 插件
  plugins:[...],
  optimization: {
    // 告知 webpack 使用 TerserPlugin 或其它在 optimization.minimizer定义的插件压缩 bundle。
    minimize: true,
    // 允许通过提供一个或多个定制过的 TerserPlugin 实例，覆盖默认压缩工具(minimizer)。
    minimizer: [
      // css压缩也可以写到optimization.minimizer里面，效果一样的
      new CssMinimizerPlugin(),
      // 当生产模式会默认开启TerserPlugin，但是我们需要进行其他配置，就要重新写了
      new TerserPlugin({
        parallel: threads // 开启多进程
      }),
      // 配置图片压缩
      new ImageMinimizerPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.imageminGenerate,
          options: {
            plugins: [
              ["gifsicle", { interlaced: true }],
              ["jpegtran", { progressive: true }],
              ["optipng", { optimizationLevel: 5 }],
              [
                "svgo",
                {
                  plugins: [
                    "preset-default",
                    "prefixIds",
                    {
                      name: "sortAttrs",
                      params: {
                        xmlnsOrder: "alphabetical",
                      },
                    },
                  ],
                },
              ],
            ],
          },
        },
      }),
    ],
  },
  // 模式
  mode: 'production',
  devtool: 'source-map'
};

打包时如果出现报错，很可能是下载依赖包时下载失败，缺少执行文件，比如jpegtran.exe、optipng.exe等，具体请查看报错信息。可取相应官网地址手动下载缺少的文件，并放置到对应位置。
jpegtran 官网地址。OptiPNG 官网地址。

优化代码运行性能

Code Split

打包代码时会将所有js文件打包到一个文件中，体积很大。如需要渲染首页内容，就应该只加载首页的js文件，其他文件不应该加载。所以需要将打包生成的文件进行代码分割，生成多个js文件，渲染哪个页面就只加载某个js文件，这样加载的资源就少，速度就更快。
代码分割（Code Split）主要做了两件事：

  • 分割文件：将打包生成的文件进行分割，生成多个js文件。
  • 按需加载：需要哪个文件就加载哪个文件。

多入口文件

当项目有多个入口文件时，需要打包生成多个入口文件。如下所示

entry: {
  main: "./src/main.js",
  app: "./src/app.js",
},

打包后会生成两个入口文件，文件名称我们可以使用自定义，例如[name]，如下所示：

// webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // 多入口
  entry: {
    main: "./src/main.js",
    app: "./src/app.js",
  },
  output: {
    path: path.resolve(__dirname, "./dist"),
    // [name]是webpack命名规则，使用chunk的name作为输出的文件名。
    // 什么是chunk？打包的资源就是chunk，输出出去叫bundle。
    // chunk的name是啥呢？ 比如： entry中xxx: "./src/xxx.js", name就是xxx。注意是前面的xxx，和文件名无关。
    // 为什么需要这样命名呢？如果还是之前写法main.js，那么打包生成两个js文件都会叫做main.js会发生覆盖。(实际上会直接报错的)
    filename: "js/[name].js",
    clear: true,
  },
  plugins: [...],
  mode: "production",
};
提取重复代码

当多入口文件中都引用了同一份代码，我们不希望这份代码被重复打包到两个文件中，导致代码重复，体积更大。此时我们需要提取多入口的重复代码，只打包生成一个js文件，其他文件引用它就好。
例如，入口文件app.js和main.js中都引用了math.js文件，我们需要在webpack配置文件中配置splitChunks属性避免重复打包，如下所示。

...

module.exports = {
  // 多入口
  entry: {
    main: "./src/main.js",
    app: "./src/app.js",
  },
  output: {...},
  plugins: [...],
  mode: "production",
  optimization: {
    // 代码分割配置
    splitChunks: {
      chunks: "all", // 对所有模块都进行分割
      // 以下是默认值
      // minSize: 20000, // 分割代码最小的大小
      // minRemainingSize: 0, // 类似于minSize，最后确保提取的文件大小不能为0
      // minChunks: 1, // 至少被引用的次数，满足条件才会代码分割
      // maxAsyncRequests: 30, // 按需加载时并行加载的文件的最大数量
      // maxInitialRequests: 30, // 入口js文件最大并行请求数量
      // enforceSizeThreshold: 50000, // 超过50kb一定会单独打包（此时会忽略minRemainingSize、maxAsyncRequests、maxInitialRequests）
      // 修改配置
      cacheGroups: {
        // 组，哪些模块要打包到一个组
        // defaultVendors: { // 组名
        //   test: /[\\/]node_modules[\\/]/, // 需要打包到一起的模块
        //   priority: -10, // 权重（越大越高）
        //   reuseExistingChunk: true, // 如果当前 chunk 包含已从主 bundle 中拆分出的模块，则它将被重用，而不是生成新的模块
        // },
        default: {
          // 其他没有写的配置会使用上面的默认值
          minSize: 0, // 我们定义的文件体积太小了，所以要改打包的最小文件体积
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};
按需动态加载

想要实现按需加载，动态导入模块。还需要额外配置。所谓按需加载，是指页面加载仅加载需要呈现的内容，对于按钮或者其他不需要初始化加载的js文件等，可配置动态加载模式，仅在触发时加载。如下所示。

// main.js
console.log("hello main");

document.getElementById("btn").onclick = function () {
  // 动态导入 --> 实现按需加载。该方法是按钮btn上的onClick事件，无需初始化时加载。
  // 即使只被引用了一次，也会代码分割
  import("./math.js").then(({ sum }) => {
    alert(sum(1, 2, 3, 4, 5));
  });
};

单入口

开发时如果是单页面应用（SPA），只有一个入口（单入口）。可进行如下配置。

// webpack.prod.js
...

function getCommonStyleSets(pre) {...}

module.exports = {
  ...
  optimization: {
    ...
    splitChunks:{
      chunks: "all"
      // 其他取默认值，或者自行配置
    }
  },
  ....
};

自定义按需动态导入文件名称

对于按需导入的文件，可使用webpackChunkName: name的方式自定义文件名称。如下所示

// main.js
import count from "./js/count";
import sum from './js/sum';
import { cube } from './js/math';
// 需要引入才能被打包
import './css/index.css';
import './less/index.less';

console.log(count(1,2));
console.log(sum(1,2,3,4));
console.log(cube(3));

// 判断是否开启热模块替换
if(module.hot){
  // 有回调函数
  module.hot.accept('./js/count.js',function(){
    const result1 = count(2, 1);
    console.log("new ",result1);
  });
  // 无回调函数
  module.hot.accept('./js/sum.js');
}

document.getElementById("btn").onclick = function() {
  // webpackChunkName: "math"：这是webpack动态导入模块命名的方式
  import(/* webpackChunkName:"newtest" */"./js/newTest.js").then(({ sums }) => {
    console.log(sums(1,2,3))
  });
}

统一命名配置名称

对于打包的图片、字体等asset/resource文件可使用assetModuleFilename属性进行统一配置，可省略loader中配置的generator属性。同样对于chunk类的分割打包文件可使用chunkFilename进行区分配置，如下所示。

// webpack.prod.js
...

function getCommonStyleSets(pre) { ... }

module.exports = {
  // 单入口
  entry: './src/main.js',
  // 输出
  output: {
    path: path.resolve(__dirname, '../dist'),
    // js资源
    filename: 'static/js/main.js',
    chunkFilename: "static/js/[name].chunk.js", // 动态导入输出资源命名方式
    assetModuleFilename: "static/media/[name].[hash][ext]", // 图片、字体等资源命名方式（注意用hash）
    // 在打包前，将dist目录整个清空
    clean: true
  },
  // 模块
  module: {
    rules: [
      {
        // oneOf实现只匹配一项loader，剩余loader不再匹配
        oneOf: [
          {...},
          {...},
          {
            test: /\.(png|svg|jpg|jpeg|gif)$/i,
            type: 'asset',
            parser: {
              dataUrlCondition: {
                maxSize: 15 * 1024 // 小于15kb使用base64格式，其他引用图片路径
              }
            },
            // generator: {
            //   // 控制图片输出路径及文件名称
            //   filename: 'static/imags/[hash:8][ext][query]'
            // }
          },
          {
            test: /\.(ttf|woff2?)$/,
            type: "asset/resource",
            // generator: {
            //   filename: "static/media/[hash:8][ext][query]",
            // },
          },
          {...}
        ]
      }
    ]
  },
  // 插件
  plugins:[...],
  optimization: {...},
  // 模式
  mode: 'production',
  devtool: 'source-map'
};

Preload / Prefetch

虽然前面已经做了代码分割，同时会使用import动态导入语法来进行代码按需加载（也叫懒加载，比如路由懒加载就是这样实现的）。但是加载速度可能会有问题，比如：是用户点击按钮时才加载这个资源的，如果资源体积很大，加载速度慢，那么用户会感觉到明显卡顿效果。想在浏览器空闲时间，加载后续需要使用的资源。就需要用上Preload或Prefetch技术。

  • Preload：告知浏览器立即加载资源。
  • Prefetch：告知浏览器在空闲时才开始加载资源。
    共同点：都只会加载资源，并不执行。且都有缓存。
    区别：Preload加载优先级高，Prefetch加载优先级低。Preload只能加载当前页面需要使用的资源，Prefetch可以加载当前页面资源，也可以加载下一个页面需要使用的资源。
    问题：兼容性较差，Preload相对于Prefetch兼容性好一点。参考网站：Can I Use
    配置如下。
    安装包：npm i @vue/preload-webpack-plugin -D。
    配置 webpack.prod.js。
// webpack.prod.js
...
// preload插件
const PreloadWebpackPlugin = require("@vue/preload-webpack-plugin");

const threads = os.cpus().length-1;

function getCommonStyleSets(pre) { ... }

module.exports = {
  ...
  // 模块
  module: {...},
  // 插件
  plugins:[
    ...
    new PreloadWebpackPlugin({
      rel: "preload", // preload兼容性更好
      as: "script",
      // rel: 'prefetch' // prefetch兼容性更差
    }),
  ],
  optimization: {...},
  // 模式
  mode: 'production',
  devtool: 'source-map'
};

Network Cache

项目开发时对静态资源会使用缓存来优化，浏览器第二次请求资源会读取缓存，速度很快。但是这样的话就会有一个问题, 因为前后输出的文件名是一样的，例如都叫main.js，一旦将来发布新版本，因为文件名没有变化导致浏览器会直接读取缓存，不会加载新资源，项目也就无法更新。所以需要确保更新前后文件名不一样，以便读取最新的文件内容。

  • fullhash（webpack4是hash）
    每次修改任何一个文件，所有文件名的 hash 至都将改变。所以一旦修改了任何一个文件，整个项目的文件缓存都将失效。
  • chunkhash
    根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的哈希值。我们js和css是同一个引入，会共享一个hash值。
  • contenthash
    根据文件内容生成hash值，只有文件内容变化了，hash值才会变化。所有文件hash值是独享且不同的。
    webpack配置文件配置内容如下。
// webpack.prod.js
function getCommonStyleSets(pre) {...}

module.exports = {
  ...
  // 输出
  output: {
    path: path.resolve(__dirname, '../dist'),
    // js资源
    // [contenthash:8]使用contenthash，取8位长度
    filename: 'static/js/main.[contenthash:8].js',
    chunkFilename: "static/js/[name].[contenthash:8].chunk.js", // 动态导入输出资源命名方式
    assetModuleFilename: "static/media/[name].[hash][ext]", // 图片、字体等资源命名方式（注意用hash）
    // 在打包前，将dist目录整个清空
    clean: true
  },
  // 模块
  module: {...},
  // 插件
  plugins:[
   ...
    new MiniCssExtractPlugin({
      // 定义输出的文件名和目录
      filename: 'static/css/[name].[contenthash:8].css',
      chunkFilename: "static/css/[name].[contenthash:8].chunk.css",
    }),
    ...
  ],
  ...
};

但以上依旧会产生一个问题，例如main.js中引用了math.js文件。当修改了math.js文件再重新打包的时候，因为contenthash原因，math.js文件hash值发生了变化（这是正常的）。但是main.js文件的hash值也发生了变化，这会导致main.js的缓存失效。（因为main.js中引用了math.js，所以打包时由于math文件额hash值发生变化，导致main.js内容也发生了变化）。
解决方法是将hash值单独保管在一个runtime文件中。
最终会输出三个文件：main、math、runtime。当math文件发送变化，变化的是math和runtime文件，main不变。runtime文件只保存文件的hash值和它们与文件的映射关系，整个文件体积就比较小，所以变化重新请求的代价也小。
webpack配置方法如下。

// webpack.prod.js
function getCommonStyleSets(pre) {...}

module.exports = {
 ...
  optimization: {
    ...
    splitChunks:{
      chunks: "all"
      // 其他取默认值，或者自行配置
    },
    // 提取runtime文件
    runtimeChunk: {
      name: (entrypoint) => `runtime~${entrypoint.name}`, // runtime文件命名规则
    },
  },
  ...
};

Core-js

以上使用babel对js代码进行了兼容性处理，其中使用@babel/preset-env智能预设来处理兼容性问题。它能将ES6的一些语法进行编译转换，比如箭头函数、扩展运算符等。但是如果是async函数、promise对象、数组的一些方法（includes）等，它没办法处理。所以此时js代码仍然存在兼容性问题，一旦遇到低版本浏览器会直接报错。所以仍需要解决js代码的部分兼容性问题。
core-js是专门用来做ES6以及以上API的polyfill。polyfill翻译过来叫做垫片/补丁。就是用社区上提供的一段代码，让我们在不兼容某些新特性的浏览器上，使用该新特性。
下载并应用corejs包。
安装：npm i core-js。

  • 手动全部引入
import "core-js";

// 添加promise代码
const promise = Promise.resolve();
promise.then(() => {
  console.log("hello promise");
});

但这样引入会将所有兼容性代码全部引入，体积太大了。我们只想引入promise的polyfill。如下所示。

import "core-js/es/promise";

// 添加promise代码
const promise = Promise.resolve();
promise.then(() => {
  console.log("hello promise");
});

只引入打包promise的polyfill，打包体积更小。但是将来如果还想使用其他语法，需要手动引入库很麻烦。可配置自动按需引入。

  • 自动按需引入
// 不需要手动按需引入

// 添加promise代码
const promise = Promise.resolve();
promise.then(() => {
  console.log("hello promise");
});

配置babel配置文件。

// babel.config.js
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      // 按需加载core-js的polyfill
      { useBuiltIns: "usage", corejs: { version: "3", proposals: true } },
    ]
  ]
}

此时就会自动根据代码中使用的语法，来按需加载相应的polyfill。

PWA

开发Web App项目，项目一旦处于网络离线情况，就没法访问了。PWA可以给项目提供离线体验。
渐进式网络应用程序(progressive web application - PWA)：是一种可以提供类似于native app(原生应用程序) 体验的Web App的技术。其中最重要的是，在离线(offline) 时应用程序能够继续运行功能。内部通过Service Workers技术实现的。配置方法如下。
安装依赖包：npm i workbox-webpack-plugin -D。
修改webpack配置文件。

// webpack.prod.js

function getCommonStyleSets(pre) {...}

module.exports = {
  ...
  // 插件
  plugins:[
    ...
    // 离线处理
    new WorkboxPlugin.GenerateSW({
      // 这些选项帮助快速启用 ServiceWorkers
      // 不允许遗留任何“旧的” ServiceWorkers
      clientsClaim: true,
      skipWaiting: true,
    }),
  ],
  ...
};

但此时如果直接通过VSCode访问打包后页面，在浏览器控制台会发现SW registration failed。
因为我们打开的访问路径是：http://127.0.0.1:5500/dist/index.html。此时页面会去请求service-worker.js文件，请求路径是：http://127.0.0.1:5500/service-worker.js，这样找不到会导致404。
实际service-worker.js文件路径是：http://127.0.0.1:5500/dist/service-worker.js。

  • 解决路径问题
    安装依赖包：npm i serve -g。serve也是用来启动开发服务器来部署代码查看效果的。
    运行指令：serve dist。此时通过serve启动的服务器我们service-worker就能注册成功了。
webpack-tutorial-collection：webpack教程资源收集
02-06
2. **Entry（入口）**：Webpack 打包的起点，定义了应用的入口点。 3. **Output（输出）**：指定Webpack打包后的文件输出位置和命名规则。 4. **Loaders（加载器）**：用于转换不同类型的模块，例如将`.css`文件转换...
webpack相关图片压缩插件
06-20
由于这几个图片压缩的插件下载会经常失败，所以我整理了一下。 文件内容： imagemin-gifsicle，imagemin-jpegtran，imagemin-optipng，imagemin-svgo 直接解压，放到node_modules文件夹下即可。 配合我之前发布的webpack基本配置、react webpack配置和vue webpack配置使用。 详情请访问：https://blog.youkuaiyun.com/qq_45142260
Webpack高级学习：压缩图片
weixin_47295886的博客
03-24 1955
注意：如果项目中图片都是在线链接，那么就不需要了。只有本地项目静态图片才需要进行压缩。开发如果项目中引用了较多图片，那么图片体积会比较大，将来请求速度比较慢。发现少了pegtran.exe、jpegtran.exe。我是直接把包放进去了 ，因为下载不成功，所以直接移入。我们可以对图片进行压缩，减少图片体积。无损：不损害内容——移入了下面的。jpegtran 官网地址。OptiPNG 官网地址。下载包-压缩图片的插件。
babel在webpack 中使用和配置
星环
08-18 5843
babel webpack babel 7.4 @babel/core babel-core core-js @babel/plugin-transform-runtime @babel/preset-env babel-loader @babel/runtime-corejs3 在vue中使用babel
Webpack5 教程 (7) --- 减少代码体积
每天都要努力学习哦~~
01-23 1207
如果没有特殊处理的话我们打包时会引入整个库，但是实际上可能我们可能只用上极小部分的功能。是一个术语，通常用于描述移除 JavaScript 中的没有使用上的代码。开发如果项目中引用了较多图片，那么图片体积会比较大，将来请求速度比较慢。开发时我们定义了一些工具函数库，或者引用第三方工具函数库或组件库。Babel 为编译的每个文件都插入了辅助代码，使代码体积过大！你可以将这些辅助代码作为一个独立模块，来避免重复引入。默认情况下会被添加到每一个需要它的文件中。我们可以对图片进行压缩，减少图片体积。
Webpack中magemin依赖下载很容易报错的解决办法
weixin_63490373的博客
10-30 608
最近在学习webpack的过程中遇到Image Minimizer依赖插件下载失败的问题，在网上搜索了众多方法，例如修改。的方式，挂vpn等方法都无法解决。今天终于通过用cnpm成功下载了。2.下载剩下的包，有两种模式（一般在此处会出现下载失败的情况,通过cnpm）1.下载包（这个包一般都能下载成功）
webpack的定义及打包原理解析
sunshineboysy的博客
02-26 372
webpack的定义： 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。 webpack 就像一条生产线,要经过一系列处理流程后才能将源文件转换...
最小化Elm+Phoenix项目：Webpack入门指南
2. **Phoenix框架**：Phoenix是基于Elixir语言构建的一个高级Web框架，它借鉴了Ruby on Rails的设计哲学，并且强调高性能和并发处理。Phoenix内置了WebSocket支持，使得开发实时Web应用更为容易。它还支持Ecto，这是...
cesiumAnimation：Webpack配置与应用指南
而webpack.release.config.js文件则包含更高级的配置，通常用于构建生产环境下的应用，这可能包括代码压缩、丑化、资源优化等操作，以减小应用的体积和提高运行效率。 6. cesium应用部署： 在cesiumAnimation中，...
Webpack学习指南：webpack-demo项目实践
知识点二：webpack的核心特性 1. 依赖管理：webpack可以处理应用程序中的依赖关系，并将它们打包到一个或多个静态资源文件中。 2. 加载器（Loaders）：webpack可以使用加载器转换非JavaScript文件。比如：将...
掌握Vue Loader插件：webpack实现指南
2. vue-loader是什么：vue-loader是Vue.js开发的核心库之一，主要用于webpack，它允许你以一种名为单文件组件的格式撰写Vue组件。单文件组件允许将模板、脚本和样式封装在同一个文件中。 3. webpack与vue-loader的...
image-minimizer-webpack-plugin：Webpack加载器和插件，用于使用imagemin压缩图像
02-06
Imagemin Webpack 插件和加载器以优化（压缩）使用的所有图像 。 不用担心图像的大小，现在它们总是经过优化/压缩的。 image-minimizer-webpack-plugin 该插件使用优化图像。 入门 首先，您需要安装image-minimizer-webpack-plugin ： $ npm install image-minimizer-webpack-plugin --save-dev 可以用两种模式优化图像： （无质量损失）。 （质量下降）。 注意： 可以配置为无损和有损模式。 可以在无损和有损模式下配置 。 探索可为您带来最佳结果的选项。 推
webpack5学习（七）：减少代码体积
激洪的博客
05-30 398
webpack5 减少代码体积
webpack无损压缩本地静态资源图片image-minimizer-webpack-plugin
jieyucx的博客
06-17 3741
是一个用于优化和压缩图片的Webpack插件。它使用多个优化器和压缩器来减小图片文件的大小，包括和gifsicle等库。该插件可以帮助我们在构建应用程序或网站时减少图片文件大小，从而提高网站的性能和速度。在使用Image-minimizer-webpack-plugin之后，我们可以减少页面加载时间，提高用户体验。除了压缩图片之外，该插件还提供了其他一些功能，如支持WebP格式，并支持使用不同的压缩选项来优化图片。
webpack图片压缩
wujinhong2008的博客
08-02 1347
减少代码体积 | 尚硅谷 Web 前端之 Webpack5 教程 (yk2012.github.io) npminstall image-mininizer webpack plugin imagemin -D 无损压缩 npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo-D 有损...
webpack给样式添加前缀
Coralpapy的博客
08-04 1303
添加前缀的样式为： .code { user-select: none; } 下载插件的命令： npm i -D postcss-loader autoprefixer webpack.config.js文件 const MiniCssExtractPlugin = require('mini-css-extract-plugin') const { resolve } = require('path') module.exports = { mode: 'developm.
webpack高级配置-多进程打包 压缩Babel 压缩JS Image Minimizer 图片压缩
weixin_40746230的博客
06-09 1135
Image Minimizer 图片压缩 压缩Babel 压缩JS
【Vue】npm打包报错 Syntax Error: Error: Cannot find module ‘imagemin-gifsicle‘
weixin_47375144的博客
07-26 6087
npm run build时报错imagemin-gifsicle 模块未找到。 更换 npm node demi的版本
webpack处理图片资源--？
evalost的博客
07-13 495
未解之谜：好像没有办法可以处理直接写在html文件中的style标签的样式？比如怎么也获取不到style标签里的背景图片资源的之类的。。 url-loader & file-loader：处理css文件中的图片资源 html-loader / html-withimg-loader：处理html中直接引入的img图片资源（区别？） ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值