React-Native metro bundler使用babel transformer删除导入，保持bundle大小不变

rta7y2nd 于 2023-03-27 发布在 Babel

关注(0)|答案(1)|浏览(254)

以下情况：
1.我有一个ModuleUtils.ts文件。在该文件中，我有一些静态导入。
从“abc”导入{ a };从'bcd'导入{ B };从'cde'导入{ c };
1.我为不同的环境创建了不同的.env文件：react-native-dotenv
网站名称：env.dev网站env.int名称：env.live
此.env文件包含如下模块配置：

MODULES=[ a, b, c ]

.env.dev例如只能包含：

MODULES=[ a ]

1.我使用babel transformer来修改ModuleFiles.ts，以从该文件中修改/删除未使用或不需要的模块导入。
例如，如果.env.dev配置为：

MODULES=[ a ]

然后babel transformers命中该文件并删除导入，因此它只包含：

import { a } from 'abc';

另外两个

import { b } from 'bcd';
import { c } from 'cde';

正在被替换/删除。当我在metro bundler运行时对转换后的ModuleUtils.ts文件进行控制台输出时，我可以看到这种情况发生。
然后我会假设，如果构建过程完成，例如为Android构建创建APK文件，则生成的index.android.bundle文件小于index.android.bundle文件，其中所有3个导入和模块都集成在一起，但两个文件的大小相同，但是APK大小有点不同。这意味着包含所有三个导入/模块的APK文件比仅包含一个模块的文件大一些KB。这向我展示了，该过程以某种方式工作，但是我想，index.android.bundle也应该有不同的大小，但事实并非如此，所以我问为什么不呢？我想，静态导入被metro bundler捆绑到index.android.bundle文件中，因此如果我删除一些导入，它们不应该集成在index. android. bundle中。
为什么两种情况下我仍然得到相同的index.android.bundle大小？

babeljs

来源：https://stackoverflow.com/questions/69759517/react-native-metro-bundler-remove-imports-with-babel-transformer-keeps-bundle-si

1条答案

按热度按时间

iq3niunx1#

Metro Bundler由3个过程组成。
1.决议
1.转型
1.序列化
我试图转换a .ts文件（ModuleUtils.ts）在转换过程的帮助下。转换过程可以在捆绑文件之前更改文件。在这里我尝试删除ModuleUtils.ts的静态导入，希望删除的导入不会捆绑在捆绑文件中。这不起作用，因为解析过程是与转换过程并行运行的，并且已经决定了要集成到捆绑包中的模块。

Metro需要从入口点开始构建所有模块的有向图，以启动构建过程。为了从另一个文件中找到哪个文件是必需的，Metro使用解析器。*

因此，转换过程可以更改文件的内容，但是删除导入根本不会影响包的大小。
要实现动态模块导入，我必须对typescript react项目执行以下操作。
1.首先从文件中删除导入。
1.启动构建，例如yarn build：ts，以便将typescript文件编译为javascript文件
1.启动构建过程，例如yarn启动
我仍然需要找出如何做1）步骤，但这应该是可以解决的。例如，我可以为我拥有的每个.env文件创建多个ModuleUtils.ts文件，并在metro中将所有这些文件列入黑名单，除了对特定.env文件具有正确导入的那个。

const exclusionList = require('metro-config/src/defaults/exclusionList');

// exclusionList is a function that takes an array of regexes and combines
// them with the default exclusions to return a single regex.

module.exports = {
  resolver: {
    blacklistRE: exclusionList([/dist\/.*/])
  }
};

赞(0）回复(0）举报 2023-03-27

我来回答

React-Native metro bundler使用babel transformer删除导入，保持bundle大小不变

1条答案

相关问题

热门标签

最新问答