当前位置: 首页 > 知识库问答 >
问题:

在Vite(Rollup)中分离材料UI作为手动块以减小块大小

濮阳靖
2023-03-14

有人使用Vite捆绑他们的MUI应用程序吗?我很惊讶我的供应商块(1.1MB)来自Vite/Rollup。我提出了以下配置,将MUI包划分为自己的块:

import { defineConfig } from "vite";
import reactRefresh from "@vitejs/plugin-react-refresh";
import { dependencies } from "./package.json";

// whenever you get the error: (!) Some chunks are larger than 500kb after minification
// find the biggest lib in your vendors chunk and add it to bigLibs
const bigLibs = [
  { regExp: /^@material-ui*/, chunkName: "@material-ui" },
  { regExp: /^@aws-amplify*/, chunkName: "@aws-amplify" },
];

function getManualChunks(deps: Record<string, string>) {
  return Object.keys(deps).reduce(
    (prev, cur) => {
      let isBigLib = false;
      for (const l of bigLibs) {
        if (l.regExp.test(cur)) {
          isBigLib = true;
          if (prev[l.chunkName]) {
            prev[l.chunkName].push(cur);
          } else {
            prev[l.chunkName] = [cur];
          }
          break;
        }
      }
      if (!isBigLib) prev.vendors.push(cur);
      return prev;
    },
    { vendors: [] } as Record<string, string[]>
  );
}

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: getManualChunks(dependencies),
      },
    },
  },
  plugins: [reactRefresh()],
  resolve: {
    alias: [
      {
        find: "./runtimeConfig",
        replacement: "./runtimeConfig.browser",
      },
    ],
  },
});

但是我在浏览器中发现一个错误:

@material-ui.1d552186.js:1 Uncaught TypeError: Cannot read property 'exports' of undefined
    at @material-ui.1d552186.js:1

有人知道发生了什么吗?我怀疑我没有正确地摇树。

共有2个答案

仲孙逸明
2023-03-14

如果你想节省所有模块,试试这个

...
manualChunks: (id) => {
    if (id.includes('node_modules')) return id.toString().split('node_modules/')[1].split('/')[0].toString();
}
...

当做

羊冠玉
2023-03-14

如果你为“manualChunks”设置一个函数,那么第一个参数将是“string”

https://www.rollupjs.org/guide/en/#outputmanualchunks

试试这个:

manualChunks: (id) => {
if (id.includes("node_modules")) {
    if (id.includes("@aws-amplify")) {
        return "vendor_aws";
    } else if (id.includes("@material-ui")) {
        return "vendor_mui";
    }

    return "vendor"; // all other package goes here
}
},
 类似资料:
  • 我有一个登录页面,有两个文本字段:用户名、密码和登录按钮,用户名字段在最上面,密码字段在下面,登录按钮在底部。我希望它们始终位于页面的中心,无论是垂直还是水平。我试过这个: 它只是水平居中。我怎样才能使它水平和垂直居中?

  • 我想知道是否可以修改SVG的“容器”。 我认为那个“容器”实际上是SVG本身,所以如果我修改(减少)它,箭头也会收缩。 我知道如何修改SVG的大小,但我需要的是减小“容器”大小,同时保持蓝色箭头的大小不变。 我试过: 其中: 但这缩小了图标(见第二张照片)

  • 我最近提议使用swashuckle将swagger集成到我们的Web API中,以便在内部向我们的工程师公开API功能。对于我们的目的,swagger在生产中没有意义,因为API是后端的......作为一个企业环境,API的数量很大,我可以预见两个主要问题: 程序集的大小约为2.6MB:假设数百个集成了swahbuckle的API构建突然之间,我们所有应用程序的大小都增加了4.5倍。不合理的打击。

  • 我正在使用Material UI Slider,我想通过函数获取值。 我的代码如下: 这不起作用,并显示此错误。 (JSX属性)onChange?:((事件: React.更改事件 有人知道如何得到它吗?

  • 问题内容: 我想将一个非常大的字符串(例如10,000个字符)分割成N个大小的块。 就性能而言,最佳方法是什么? 例如: 被2分割成。 使用这种方法是否可能实现?如果可以,从性能角度来看,这是否是最佳方法? 问题答案: 您可以执行以下操作: 该方法仍可用于大小不是块大小的整数倍的字符串: 通常,对于要从中提取最多 n个 大小的子字符串的任何字符串,都可以执行以下操作: 如果您的字符串可以包含换行符

  • 我有一个尺寸为800x800的图像,其大小为170 kb。我想将此图像调整为600x600。调整大小后,我希望缩小图像大小。我该怎么做?