2）命名导入

import { Button, TextField } from '@mui/material'

制作一个mui对象的d毁，只提取按钮和textfield。

3）imsolazyTomakeGoodCode导入（命名空间导入）

import * as mat from '@mui/material'

将MUI的所有组件带入MII中，然后将其保存为MUI.BUTTON和MUI.TEXTFIELD）

如果您说了选项1 ...您是对的！
如果您说的选项2 ...您也是对的！
如果您说的是选项3 ...您也是对的！

，如果在选项3中，我们向JavaScript解释了一切都将所有内容都带入了我们的项目？这是我想在本文中与您交谈的概念所谓的“树木摇动”的地方。

Openai制作的模拟

想象一下秋天的绿树成荫的东西，到处都是各种颜色的叶子。随着风的吹动，干燥的叶子脱落并掉到了地上，只留下了树枝中的活着和健康的叶子。这种自然过程有助于Onlobol保持清洁并节省未来季节的能量。 同样，在开发世界中，“树木摇动”是一个优化过程，它消除了项目的档案和包装的未使用或“死”。就像从一个鲜活的叶子中掉下的干叶一样，未使用的代码被识别并消除，从而使最终应用变得轻巧，严格和高效。

让我们清楚...

让我们澄清一下概念“摇晃”（如果我们将其纳入我们的语言，那就是“摇树”）不是JavaScript的概念，而是它是一个非正式的概念，并且包括删除所有代码在转换，编译和/或包装时，它没有在我们的项目中使用，以优化相同的大小和负载时间，以便在富有成效的环境中提起它。

这不是一个新概念，实际上，更有意义的是，它们的规模比他们在云服务中提供的大得多。

树木在JavaScript中如何工作？

，我们可以在项目中执行自动化的树木摇动过程，我们需要两种成分：

• 通过kude2和kude3（es6）进口元素
• 联合国建筑商（Vite，Webpack，lolup等）

该流程的逐步将为：

• 我们要求建筑商生成我们的分销包。 （您会从软件包文件中找到它为脚本。JSONKUUDE4
• 构建器将执行我们代码的“静态宣传”的过程，其中确定依赖项需要我们的项目以及多少。
• 建造者一旦完成了“ IS”完成，就可以消除我们已导入的所有代码和依赖项，但我们没有使用。此步骤将发现它在“ DCE”之类的许多地方都记录下来（通过英语“消除代码消除”中的首字母缩写）。
• 最后，从此过程的结果中，它将通过源代码执行，这将有助于我们减少产品的大小。 （但是本文没有对此文章进行处理，但我提到了这一点，因为我会让他们能够观察它）。

把它付诸实践

我们将在实践中证明对上述练习的响应是正确的，因为我们将使用VITE初始化一个项目（它们不认为我应与应与一个反应一起使用框架！）

步骤1：创建项目（在我的情况下使用Create-Vite）
npx create-vite@latest tree-shaking-demo

步骤2：选择您的喜欢框架（香草，Vue，React，preateact，Svelte等...）。就我而言，我去反应是因为它是最受欢迎的，并且我的标签内有更多的人来带来更多的人：D。

步骤3：选择一个变体（JavaScript，Typescript，JavaScript + SWC或Typescript + SWC）。就我而言，我将通过Babel的SWC（快速网络编译器）使用打字稿。为什么？因为我讨厌JavaScript的一件事是我们将使用Typescript纠正的Typadodã©bil，如果我们谈论的是提高性能，SWC超过了Babel。

步骤4：按照屏幕上的说明：
cd tree-shaking-demo
npm install
npm run dev

步骤5：通过以前的步骤，我们已经有了一个基本项目来开始搅动树...但是，在我的情况下，让我们将可以进口的项目带给我们的项目。 ，我将带我带手动安装的MUI：
npm install @mui/material @emotion/react @emotion/styled

步骤6：让我们打开我们的src/app.tsx文件，让我们删除您的所有内容（相信我，我是工程师！），然后用以下代码替换它：

function App() {
   return (
    <div>
      <TextField label="Lorem ipsum" variant="outlined" />
      <Button variant="outlined">Dolor</Button>
    </div>
  )
}
export default App

您的网络浏览器和您的IDE可能会因错误而疯狂，因为我们基本上正在使用我们没有导入的组件（aãºn），但是平静...现在我们准备好尝试树摇动。

演示1：通过“默认导入”导入

在您的src/app.tsx文件的开头添加以下行：

import Button from "@mui/material/Button"
import TextField from "@mui/material/TextField"

使用这两行我们通过默认导入实现了按钮和Textfield组件，所有错误都应消失。

现在，运行构建步骤并确认构建大小：
npm run build
我的结果是以下（294.13kb ...在JavaScript块中接近monos）

演示2：通过“命名导入”导入

我们替换了以下几行：

import { Button, TextField } from "@mui/material"

让我们回到
项目 npm run build

我的结果是以下（294.14KB）

演示3：依赖性的全球重要性

在此示例中，我们将完全将自己带入一个名为MUI的变量，为此，我们将替换以下所有以下代码：

import * as mui from "@mui/material"

function App() {

  return (
    <div>
      <mui.TextField label="Lorem ipsum" variant="outlined" />
      <mui.Button variant="outlined">Dolor</mui.Button>
    </div>
  )
}

export default App

让我们建立项目
npm run build

结果？ 294.14KB

结论

碎片，少量，我们设法用简单的例子来证明JavaScript的Bover，通过树木摇晃，在压实项目规模的时候极大地促进了生活为了使我们的所有依赖性以相同的方式适用于我们的尊严，仅适用于我们的项目工作所需的内容。

现在，为什么不全部进口重量相同的294.14KB？为什么我们的进口进口物重294.13KB？这是“最小化代码”发挥作用的地方。但这将是下一篇文章的原因;）

示例的来源：

https://github.com/AdrianGomezCL/tree-shaking-demo