首页
前端开发
Webpack
sizeof-loader Webpack图像尺寸提取加载器

sizeof-loader Webpack图像尺寸提取加载器

0 次浏览 0 条评论
zip
zip

图片尺寸和大小信息的自动提取，sizeof-loader干得还挺溜的。它的用法和 url-loader 或 file-loader 差不多，但多了个功能，就是能直接帮你拿到图片的宽高和体积信息。对于做前端性能优化或者需要动态计算布局的项目来说，嗯，挺方便的。

安装方式也常规，用 yarn add --dev sizeof-loader 或 npm install --save-dev sizeof-loader 就行。配置也简单，直接往 webpack.config.js 里加一条规则就搞定了：

module.exports = {
  module: {
    rules: [
      {
        test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
        use: [
          {
            loader: 'sizeof-loader'
          }
        ]
      }
    ]
  }
};

需要注意的是，它只是提取信息，不做压缩、转码那一套。如果你图还需要压缩，那就可以搭配 img-loader 一起用，组合拳效果更好。

如果你有需求是要动态获取图片的尺寸，比如自动计算占位符尺寸，或者要做懒加载优化，那这个 loader 还是蛮值得一试的。

zip 文件大小：45.45KB