问题标签 [tree-shaking]

我用 Ionic 4 创建了一个 Angular 7 项目。在这个项目中，我有多个环境，例如“本地”或“火力基地”。

在我的 environment.ts 中，是一个与上面的字符串相对应的参数。

我创建了一个模块，以允许我的服务按照本文所述进行延迟加载。它看起来如下：

接下来我有一个 InjectionToken，我在其中声明我在上面提到的 Module 中提供服务，并使用工厂来决定使用哪个服务。

这种解决方案通常可以正常工作。在“firebase”模式下，会加载 firebase 服务，而在“local”模式下会加载本地服务。

但是在“prod”模式下编译和提供服务时，ChromeDev-Tools 中的包大小在任一服务模式下都是相同的。这使我想到，其他服务也永远无法访问，但仍在编译。

那么有没有办法实现这个功能来忽略有效无法访问的代码呢？因此，如果我在我的环境文件中设置“本地”，firebase 服务以及依赖项永远不会包含在构建中？

提前致谢！

我有一个文件，我在其中导出多个 const，其中包含名为 icons.js 的子数组。

在另一个反应文件中，我们称之为 CloseButton.js。我只进口

import { cross } from './icons.js';

当我在启用生产模式的情况下运行 webpack 时，所有其他图标似乎也被导入到转译的 CloseButton 中（icons.js const 导出量接近 100kB 左右，但单行不应大于 1kB）。 js。

我正在使用带有 @babel/preset-env 和 @babel/preset-react 的 webpack 4.30.0。

webpack.config.js

我测试运行相同的设置，但只从 导出字符串icons.js，然后代码正确排除了死代码。

有谁知道是否有一种方法可以只从 icons.js 文件中导出“交叉”而不为 icons.js 中定义的每个反应组件创建一个单独的文件？

我已经测试了从 icons.js 中删除所有const作为 React 组件导出的 s 引用，并且可以正常工作，但这并不能让我导出图标。

您好，我的组件中的 UI 模块中有一个索引，导出该文件夹中的所有组件，如下所示：

~/components/ui/index.js：

我在一些页面中使用它，如下所示：

现在理想情况下，Footer 组件应该被拆分为不同的块，并且仅在需要时才加载。如果我将其从 的导出中删除，则此方法有效~/components/ui/index.js，如下所示：

~/components/ui/index.js：

现在这行得通。但我想将其保留在索引中。并使用 webpack treeshakingFooter从默认包中消除。

我怎样才能做到这一点？

Angular 7. How to split code into multiple functional bundle files. I want to generate multiple bundle files:

*) Chunk1 / bundle 1

*) Chunk2 / bundle 2

Is there any other way of doing this apart from Lazy loading components

假设一个类将自己添加到另一个类，如下所示

bar.ts：

并归档foo.ts

现在，如果想在index.ts

它是未定义的。看起来bar.ts根本没有使用（可能是摇树）。所以我可以修复如下：

有没有办法告诉打字稿Bar无论如何都要包括在内，因为我展示的解决方案很丑陋。

为了完整起见，这是我的tsconfig.json

在我的 webpack 配置中

什么时候

如果我使用

或者

捆绑包大小相同，约为 3.27 mb。

但是当我在我的 webpack 配置中将模式设置为生产时，第一个导入语法的包大小为 1.52mb，但第二个语法我得到 2.5mb，这使我相信在开发中不会发生树抖动.

我在另一个堆栈溢出问题上读到 lodash-es 是一个 es6 模块，而 webpack 只能在这些模块上进行树抖动，而不是常见的 js，而且我还读到了我需要的 webpack 配置的开发

我一直都有。

所以我很好奇我缺少什么以及为什么在使用提到的插件时捆绑包大小没有减少。

我正在我在 https://github.com/JordanKlaers/vueWebpackPlayground创建的示例项目中试验这些更改

我正在使用 laravel 和 vue 构建一个全栈应用程序。我想将 quasar 集成为前端框架。我正在使用 laravel mix 来构建资产。我想知道如何使用 laravel mix 或 webpack 来摇树 quasar。该文档仅讨论 vue-cli 和 quasar-cli 摇树功能。

我尝试按照 vue-cli 的导入方式没有成功

我正在使用带有 TypeScript 的 Google Firebase Cloud Functions，我发现即使每个函数都是单独部署的，它们都共享相同的包和依赖项，即使某些函数不使用它们也不导入它们。

就我而言，一个云功能使用 Redis，而其他云功能不使用。我有 10 个功能。所有 10 个函数实际上最终都导入了与 redis 相关的代码，即使它们没有导入它们。

由于所有函数共享相同的入口点，index.js。目前似乎不可能为每个函数设置单独的摇树捆绑包/入口点。

这在捆绑包大小/冷启动时间/内存等方面非常低效。这也意味着随着我拥有越来越多的功能，捆绑包大小将随着所有功能一起增长。它不可扩展。

有没有办法不共享入口点 index.js，并通过使用 webpack 之类的捆绑器来完全独立的捆绑包？

我正在尝试创建一个组件库 wie rollup 和 Vue，当其他人导入它时可以摇树。我的设置如下：

相关摘录自package.json

这是我的全部rollup.config.js

我有一个相当简单的项目结构，其中包含一个index.js文件和 2 个 Vue 组件：

我index.js导入 Vue 文件并导出它们：

如果我不export default undefined;以某种方式导入我的库的任何应用程序都找不到任何导出。诡异的。

现在，当我创建另一个应用程序并red-components-with-rollup像这样导入时：

我从我的应用程序中打开包，我还会Button.vue在我的包中找到源代码，它没有被作为死代码消除。

我究竟做错了什么？

我想知道，以下两个选项中的哪一个是在webpack中更好的Tree Shaking的正确方法：

或者，