有人使用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
有人知道发生了什么吗?我怀疑我没有正确地摇树。
如果你想节省所有模块,试试这个
...
manualChunks: (id) => {
if (id.includes('node_modules')) return id.toString().split('node_modules/')[1].split('/')[0].toString();
}
...
当做
如果你为“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。调整大小后,我希望缩小图像大小。我该怎么做?