标签: tree-shaking

我最近看到一个关于模块深度要求的建议 -

注意:如果您不想要基于ReactART的组件及其依赖项,请执行深度要求:从'react-native-progress/Bar'中导入ProgressBar;.

根据我的知识 - 没有添加/配置Webpack 2与树摇动和自己启用uglify - RN捆绑器不会树摇动和删除未使用的模块.

鉴于此,如果建议的深度要求真的会导致未使用的依赖关系未被包含在最终捆绑中吗？

我有一个create-react-app项目,我正在努力减少捆绑的JS文件大小.我的捆绑包大小的大约一半来自名为MDBReact(反应组件库)的依赖项,其中大部分未被使用.我试图找出如何/如果我可以从捆绑的构建中移除树抖动的死代码.我一直在研究这个问题,我发现的最接近的文章就是这个.这篇文章让我感到困惑,并没有给出如何或是否可以做到的任何解释.我还在webpack树上发现了这个指南,说明如何完成它,但这似乎并没有解决问题.

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 配置批量更改为：

resolve: {
  mainFields: ['module']
}

将mainFields必须被设置为main当前获取应用程序工作。这导致它总是拉入每个依赖项的 CommonJS 版本，而错过了 treeshaking。希望做这样的事情：

resolve: {
   foo: {
     mainFields: ['main']
   },
   bar: {
     mainFields: ['module'],
}

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

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

我们没有使用包中的所有模块，但未使用的模块没有经过 treeshaken。任何减少捆绑包大小的提示？

规则

  {
    test: /\.(js|jsx|ts|tsx)$/,
    loader: 'babel-loader',
    options: {
      cacheDirectory: true,
      plugins: ['react-native-web']
    },
    exclude: /node_modules/
  },

产品配置：

module.exports = merge(baseConfig, {
  mode: 'production',
  plugins: [new TerserPlugin()]
})

如果之前有人问过这个问题，我必须道歉，但我无法在网上或在与 tree shake 相关的 webpack 文档中找到答案。

树摇动如何使用默认参数进行工作？对于上下文：我特别关心 tree-shaking 的 webpack 实现如何处理默认参数。

给出以下假设的应用程序结构：

/
|_ dependency/
| |
| |_ dependency.js
| |_ moderatelyLargeFile.js
|
|
|_src/
  |
  |_ application.js
  |_ someSmallFile.js

以及每个文件中的以下代码：

dependency.js

import moderatelyLargeFile from './moderatelyLargeFile.js';
import { someParsingFunction1, someParsingFunction2 } from 'somewhere-else-dependency';

export default function parseSomeFile(file = moderatelylargeFile) {
  let parsedResult = { ...someParsingFunction1(file), ...someParsingFunction2(file) };
  return parsedResult;
}

application.js

import parseSomeFile from './dependency/dependency.js';
import someSmallFile from './someSmallFile.js'
let result = parseSomeFile(someSmallFile);
// Do other application stuff with …

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

当前状态

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

import { Button, Input } from 'my-library';

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

此时，我已经更新了汇总以创建命名的组件文件，因此可以执行如下导入：

import Button from 'my-library/Button';

当我只使用一个组件时，这很好，但是每当我需要一个以上组件时，例如必须从同一库中导入五行，就会感到多余。但是，每当我再次尝试对其进行分解时，整个库都将被导入。

目标

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

rollup.config

export default {
  experimentalCodeSplitting: true,
  input: [
    'src/index.js',
    'src/components/Button/Button.js',
    'src/components/Input/Input.js',
  ],
  output: {
    exports: 'named',
    dir: 'dist/',
    format: 'cjs',
    chunkFileNames: 'chunks/[name]-[hash].js',
  },
  plugins: [
    external(),
    babel({ exclude: 'node_modules/**', plugins: ['external-helpers'] }),
    resolve(),
    commonjs(),
  ],
};

index.js

import Button from './components/Button/Button';
import Input from './components/Input/Input';

exports.Button = Button;
exports.Input = Input;

因此，这将产生两个文件，Button.js并Input.js为每个组件构建了一个很棒的文件。但是是否有可能在一条import …

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

import { someFeature } from 'someModule'  // Option 1
import { isEmpty } from 'lodash' // Example 1

import someFeature from 'someModule/someFeature' // Option 2
import isEmpty from 'lodash/isEmpty' // Example 2