[英]Is better for performance to destructure dependency imports in create-react-app?
Does it improve performance if I only import what I need?如果我只导入我需要的东西,它会提高性能吗? I think it depends on certain webpack config, is that true?
我认为这取决于某些 webpack 配置,这是真的吗? if yes does
create-react-app
have that config integrated by default?如果是,
create-react-app
默认是否集成了该配置? How do I test how much performance I am gaining by doing this?我如何测试这样做可以获得多少性能?
For example instead of this:例如,而不是这个:
import React from "react";
import ReactDOM from "react-dom/client";
const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
root.render(
<React.Fragment>
<h1>Hello</h1>
</React.Fragment>
);
I can use dependencies this way:我可以这样使用依赖项:
import { Fragment } from "react";
import { createRoot } from "react-dom/client";
const root = createRoot(document.getElementById("root") as HTMLElement);
root.render(
<Fragment>
<h1>Hello</h1>
</Fragment>
);
You won't gain any performance by such imports.您不会通过此类导入获得任何性能。
Only thing you can reach by destructuring imports is reduce bundle size (read about tree-shaking ).只有通过解构导入才能达到的目的是减小包大小(阅读有关tree-shaking 的信息)。
But in case of import of react
I afraid it won't make any effect, you can check size of builded budnle with and without destructuring但是在导入
react
的情况下,我担心它不会产生任何影响,你可以检查构建的 budnle 的大小有和没有解构
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.