问题标签 [tree-shaking]

我们在一个项目文件中使用来自antd/lib的lib/styles/.css文件。在生产构建中，即使antd/package.json将提供位置的文件定义为 sideEffects，也不会发布相同的内容。

我们已经尝试为Webpack 配置的module.rules中的 CSSLoader 从 node_modules 中提取的所有 CSS 文件设置sideEffects: true。

进口声明——

antd/package.json中的 sideEffects 定义

CSSLoader 规则定义为我们努力将所需文件标记为 sideEffects-

从antd导入的 CSS 文件不存在于生产包中。

PS 没有显示错误信息

用 JS 摇树测试它create-react-app@3.0.1不起作用。

重现步骤：

1. 创建新应用create-react-app treeshakeTest
2. cd treeshakeTest
3. npm i
4. npm i --save antd
5. 在顶部和 返回的某处src/App.js添加import Button from 'antd/es/button'<Button type="primary">Button</Button>

结果：随着antd导入，捆绑包增加，+171.28 KB参见图片

antd导入 前：

Webpack 有一个resolve.mainFields配置：https ://webpack.js.org/configuration/resolve/#resolvemainfields

这允许控制应将哪个 package.json 字段用作入口点。

我有一个应用程序可以引入几十个不同的 3rd 方包。用例是我想根据包的名称指定要使用的字段。例子：

• 对于包，请foo使用中的main字段node_modules/foo/package.json
• 对于包，请bar使用中的module字段node_modules/bar/package.json

我依赖的某些包没有以正确的方式捆绑，该module字段指向的代码不遵循这些规则：https ://github.com/dherman/defense-of-dot-js/blob/master /proposal.md如果我将 webpack 配置更改为：

mainFields必须设置为当前main使应用程序正常工作。这导致它总是拉入每个依赖项的 CommonJS 版本并错过 treeshaking。希望做这样的事情：

包通过其字段foo捆绑到我的应用程序中，main并且包通过其字段捆绑到我的应用程序bar中module。我意识到使用包进行 treeshaking 的好处bar，并且我不会使用foo包破坏应用程序（具有不正确的模块语法的模块字段）。

我使用 Vue CLI 3 创建了一个应用程序，我一直在观看构建，它警告我有大文件：

我不知道如何减小这个文件大小，它完全来自外部库：

我以为它无法摆脱。就在今天，我在 chrome 中做了“Coverage”工具，它显示它大部分未使用。如何摆脱这些未使用的代码以加快应用加载速度？

我已经在压缩，我的问题更多是关于如何实际使这些文件摇树以减小文件大小。

在 Dart 中，我们可以使用show关键字选择性地导入部分文件或库...

...但是 Flutter 会摇树。show关键字在 Flutter 中有什么好处还是完全没有意义？

• Lodash@4.17.4

• Webpack@3.8.1

• 通天塔@7

• babel-plugin-lodash@3.3.2

  当涉及到 Lodash 时，我使用命名导入。我已经将@babel/preset-env 配置为'modules' 设置为false 以防止转换为Common JS 并使用'lodash' 作为'babel-loader' 配置中的插件。尽管如此，我意识到我的块拥有整个 Lodash，并且正在显着膨胀。我该怎么做才能使 lodash 不被修剪？我既没有在我的代码中导入整个库，也没有使用链接。

我无法确定date-fns v.2 摇树功能的工作原理......

为了帮助我，我做了一个非常简单的项目，使用：

• date-fns 2.1.0
• webpack 4.39.3
• typescript 3.6.2

该测试包含 2 个文件，一个充当“库”，另一个充当要运行的代码，它就像...

但问题是，虽然我只要求使用摇树使用 6 个库

从他们的文档中：

webpack 捆绑了整个 date-fns 库，这是 2 个文件726Kb的结果！

我错过了什么？...必须是一件简单的事情，但我已经没有想法了:(

该项目可以在 GitHub 上找到以便于查看（和 git pull）:)

我是 webpack 的新手，在构建处理方面我一直依赖于 create-react-app 等工具的开箱即用功能。但是，我现在才刚刚开始“尝试”并更深入地了解事物 - 所以请原谅我的新手理解。

我们在整个应用程序中都使用 Lodash，并且我们正在努力确保我们只导入我们需要的东西。据我所知，有两种导入方式：

1. import assign from 'lodash/assign';
2. import {assign} from 'lodash-es';

我个人更喜欢第二个选项，因为如果您使用多个 Lodash 函数，您可以将所有导入合并到一行中。

所以我安装了 lodash-es 库，从我的 package.json 中删除了 lodash，更新了所有的导入，然后运行了一个干净的构建。但是，当我使用 source-map-explorer 查看包时，我看到了对的引用，lodash-es即使lodash我的 package.json 中没有列出 lodash。我认为这是因为它是在 create-react-app 中的某个地方发布的。请参阅下面的源图...

import {assign} from 'lodash-es'使用约定的示例 Sourcemap

我认为这是一件坏事，并认为我可能正在“双重导入”已经在 create-react-app 中使用/导入的 lodash 函数。所以我尝试使用选项 1. 进行导入。然而，令我惊讶的是，应用程序的总大小实际上似乎更大，并且 lodash 导入的大小实际上比使用选项 2 时多约 3k！

import assign from 'lodash/assign'使用约定的示例 Sourcemap

所以我的问题是——我是否正确地解释了 lodash-es 中的源映射实际上是一种更有效的导入方式，而“双重导入”实际上并不是一种风险。还是选项 1 约定是使用 lodash 处理导入的最佳方式？

我们有一个 react-native-web 用于 web 包的 react-native-web 应用程序。问题是 react-native-web 包在最终包中是 827kb 并且是构建的主要部分。

我们没有使用包中的所有模块，但未使用的模块不是 treeshaken。有什么减少捆绑包大小的技巧吗？

规则

产品配置：

使用https://fontawesome.com/how-to-use/on-the-web/using-with/sass中描述的方法我相信我最终会在src我的 React 项目的文件夹中积累近 2.8MB 的网络字体. 我需要使用 CSS 将图标添加到日历样式中，但这不会影响摇树吗？换句话说，我不会因为使用单个图标而得到一个巨大的包大小吗？