问题标签 [tree-shaking]

所以我正在尝试减少捆绑包的大小，从常见的罪魁祸首之一开始——Lodash，我一边走一边追随这篇文章，因为显然这并不理想；

所以我进入并开始尝试执行模块导入的基本任务，即实际使用的模块导入，例如从import * as _ from 'lodash'到import each from 'lodash/each'

除了这样做我得到了.../node_modules/@types/lodash/each"' has no default export.令人困惑的例子，因为我在那里看到了出口，我在那里有我的@types 显示一切都应该没问题，但我显然错过了一些空洞的细节。lodash-es由于我的模块是，我必须使用es2015吗？我是否理解这就是为什么esModuleInterop在tsconfig设置为 true 时会吐给我的原因？我想我只是在寻找我显然遗漏的任何小细节。

角 6/CLI

目标：es5

模块：es2015

所以我只是试图通过webpack-bundle-analyzer结果寻找应该节食的东西并更深入地了解 CLI 构建过程（CLI v6.1.5、Angular v6.1.8）并改进我们的实例。

ng build当我浏览我看到的供应商捆绑包时，我注意到这只是一般情况；

不幸的是，它作为整个 jquery.js 文件在 260k+ 时没有缩小，但是我也在脚本包中找到了它；

/*! jQuery v3.2.1 | (c)考虑到我在脚本数组中明确声明了它，这是我期望的缩小文件版本angular.json

所以我想如果我把它移到tsconfig.json作为模块路径；

然后它应该选择最小版本并像我对其他人所做的那样从供应商那里剥离另一个。它确实，构建得很好，我看到了大小差异，jquery.js 从供应商包中消失了....但是，我记得这样的模块上没有 typeroot，所以当我去 init 时，我得到了一大堆error TS2304: Cannot find name '$'错误. import * as $ from 'jquery'哪一个，如果我可以避免它，我真的不想全部声明，而且我在angular.json一些我没有使用过的 jquery-ui 库的同一路径中有一个依赖项；

如果我只是省略 jquery.min.js 路径，那么我就完蛋ReferenceError: $ is not defined了。

所以我继承的这个构建过程中的一些东西是不合时宜的，我希望有人能教我一些东西。如何避免重复的脚本来节食捆绑包，以及如何确保以正确的方式尊重我的类型/环境声明？无论哪种方式都为阅读而欢呼！

我在摇树时遇到问题。似乎它对我的项目不太有效。有没有办法查看我的 webpacked 文件中实际使用的依赖项列表？

网络包配置：

像 Webpack 或 Rollup 这样的现代打包工具是否只删除未使用的模块，或者它们也能够删除模块内未使用的函数（或变量、类）？

搜索了该主题，但一无所获。

PS我没有使用捆绑器的经验（除了零配置包裹），但我制作的库需要回答这个问题。

我在这里读到了这个 - https://www.thedevelobear.com/post/5-things-to-improve-performance/ - 从库中导入所有东西不会允许摇晃树将其删除，即使它不是用过的。我不相信，这是真的吗？我认为摇树会识别出除了一对之外没有使用任何功能，然后删除这些功能。

有一种非常简单的方法可以通过检查您的导入来减少捆绑包的大小。从 3rd 方库执行方法或组件时，请确保只导入您需要的东西，而不是整个库本身。例如，如果您正在使用 lodash 并且需要 fill 方法，请直接导入它，而不是在 lodash 对象上调用它：

Cloud Native Interactive Landscape 是一个开源、仅浏览器的应用程序，它加载一个静态 React 应用程序以可视化云原生生态系统：

• 试用应用程序
• 查看源代码

你可以交互式地查看 webpack-bundle-analyzer 的结果，这里是一个快照：

我不明白为什么@material-ui/core/es会同时出现在node_modules和src中。更一般地说，我试图了解我们的 tree-shaking 是否得到了最佳实施，或者是否有更好的配置方法。如果我们最好地摇树，我也会很感激。（请注意，我们只针对常青浏览器。）

请随时 fork回购并编辑webpack.config.prod.js。如果您打开一个拉取请求，Netlify 将构建和部署一个测试服务器，您可以在test-server-url/report.html下检查结果。

我有一个包含多个反应组件的库，我想让库可以摇树，这样当我导入一个组件时

我不导入整个捆绑包。

我的 index.js 看起来像这样

我使用 webpack 捆绑

在我的 babel 配置中，我当然有

使用此设置，当我只导入一个组件并包含整个包时（导入时我也在使用 webpack）。我该如何防止这种情况？

我开始学习一些关于捆绑的知识，因为我正在更新一个使用 Rollup 的小型内部 React 组件库。

当前状态

现在，所有组件都被捆绑到一个index.js文件中。每当我导入一个或多个...

...正在导入整个库。我想解决这个问题。

此时，我已更新汇总以创建命名组件文件，因此我可以像这样进行导入：

当我只使用一个组件时这很好，但每当我需要多个组件时，例如，必须从同一个库中导入五行代码，这感觉是多余的。但是每当我再次尝试解构它们时，都会导入整个库。

目标

我希望能够从上面运行相同的解构导入语句，但只导入这两个组件。

rollup.config

index.js

所以这会产生两个文件，Button.js并Input.js为每个组件构建，这很棒。import但是是否有可能在一个语句中引入两个组件而无需库的其余部分？

笔记

• 该库目前使用 Rollup，但如果有更简单的解决方案，我认为我们不需要它。

• 我觉得使用该experimentalCodeSplitting功能并不是解决此问题的理想解决方案，而且我不太喜欢拥有块文件。

感谢您的帮助！

我在我的 react 项目中使用 typescript 和 babel 7（我删除了 tsloader，因为 babel 7 现在支持 TS）

问题是当我使用这个预设时，treeshaking 不起作用。我的 babel 配置

任何人都知道如何解决它，为什么？非常感谢

我正在练习使我的 webpack 包更小，并使用 webpack 的包分析器，我看到一个非常重的包被包含在两个不同的异步块中，即使它只使用了一次。在对我的代码进行了一些挖掘之后，我意识到这可能是因为以下情况：

文件1.js

文件2.js

文件 3.js

我假设由于 file1 全局导入重包，而 file2 从 file1 导入一个函数，因此它将重包作为依赖项获取，即使它没有导入实际使用该包的函数。我希望（或者更确切地说，希望）只有 file3 的块包含重度依赖项，因为它是唯一使用它的地方。

我应该以特定的方式处理这样的导入吗？也许我可以在 webpack 中做一个神奇的配置来帮助解决这个问题，一种更好的构建模块/函数的方法，或者只是更好的导入函数/模块/包的方法？

我正在使用 webpack 4，我在 ES2017