时间戳

首页 > 解决方案 > 如何treeshake需要多个图像的资产对象（url和文件加载器）

javascript - 如何treeshake需要多个图像的资产对象（url和文件加载器）

问题描述

我有 1 个 js 文件，需要以下列方式导出到某些图像：

export const assets = {
  UI: {
    BUTTON_GREEN: require('../assets/minified/ui/button_green_background.png'),
    BUTTON_YELLOW: require('../assets/minified/ui/button_yellow_background.png'),
  },
  BACKGROUNDS: {
    BACKGROUND_FIRE: require('../assets/minified/bg/background_fire.jpg'),
  }
};
/* etc... */

然后我在各个页面中使用它，如下所示

import {assets} from "./assets.js"

<img src={assets.UI.BUTTON_GREEN} />

我这样做是因为在使用打字稿时由于自动完成功能更容易导入图像。然后我在我的 webpack 配置中有以下加载器

  {
    test: /\/ui\/[^.]+\.(png|jpe?g|svg)$/,
    loader: 'url-loader',
    options: {
      name: 'static/images/[name]-[hash].[ext]',
      limit: 50000,
      esModule: false
    }
  },
  {
    test: /\/bg\/[^.]+\.(png|jpe?g|svg)$/,
    loader: 'file-loader',
    options: {
      name: 'static/images/[name]-[hash].[ext]',
      esModule: false
    }
  }

我使用单独的加载器来内联 ui 元素并将其他更大的图像解析为普通文件。我设置esModule为false因为否则由于某种原因我无法让我的要求工作，因为它们返回“默认”而不是与图像相关的字符串。

然后我将我的页面分成他们自己的 js 块，即

Page                        Size
┌ * /                       74 kB
├   /_app                   1.25 MB
├   /_document
├   /_error                 9.43 kB
├ * /registration/sign-in  697 B
└ * /registration/sign-up    438 B

但是你可以看到我_app超过 1mb，这是由于我内联了一些 ui 图像，它们都被吐到这个文件中，即使它只使用 2 个图像。

所以我的问题是：我如何重组我的方法，以便只将内联图像数据添加到使用它的 js 页面块中？我愿意接受额外的加载器设置/重组我的资产文件等......

标签： javascriptwebpacktree-shaking

解决方案

推荐阅读