🛵 📔 🔯 停止导入整个JavaScript包 🔁 🖖🏿 🚵🏽

仅需要使用此程序包的很少功能时，您有多少次将整个JavaScript程序包导入到项目中？您可能可以回忆起许多此类情况。

完全导入的仅需几个功能的生动示例可以称为Lodash库。如果您还没有听说过该库，则应查看其文档。特别是，在该项目的网站上，您可以发现Lodash通过处理数组，数字，对象等来简化JavaScript开发。

Lodash库包含200多个函数。这表明她确实可以帮助程序员解决很多问题。但是有可能发生，通过导入整个库，仅会调用4-5个函数。这导致我们提出一个问题，即在仅使用其功能的2-3％的情况下，导入整个程序包是否可取。让我们考虑如何处理。

Lodash获取功能

Lodash库我最喜欢的功能之一是功能get。它允许您组织对嵌套对象的安全访问，并支持使用默认值。

这是使用此功能的示例：

const _ = require('lodash');

let employee1 = {
  name : "Jon",
  address : {
    street : "North Avenue",
    area : "DAC",
    zip : "87344",
    contact : [ 12444554, 9384847 ]
  },
  designation : "Manager"
};

let employee2 = {
  name : "Jake",
  designation : "Senior Manager"
};

function getHomeContact(employee) {
  return employee.address.contact;
}

getHomeContact(employee1); // [12444554, 9384847]
getHomeContact(employee2); // Uncaught TypeError: Cannot read property 'contact' of undefined

function getHomeContactWithLodash(employee) {
  return  _.get(employee, "address.contact", []);
}

getHomeContactWithLodash(employee1); // [12444554, 9384847]
getHomeContactWithLodash(employee2); // []

使用此功能可以使代码比以前更整洁。这有助于避免由于以下事实而导致的错误：当预期为空数组时，该函数将不会返回null。使用此功能，您不能错误地map在空数组上调用方法。它可以防止其他麻烦。

让我们看看如果计划仅使用功能将Lodash库包含在项目中将如何影响捆绑包的大小get。实验将使用React项目进行。在导入库之前以及在将其连接到项目的各种选项之后，将分析捆绑软件的大小。

导入库之前的项目大小

在导入库之前，我们将分析项目文件的大小。

使用Lodash之前的文件大小

现在，让我们看一下将库导入项目的几种方法的结果。

使用不同的库导入方法后的项目大小

▍1。传统进口

这是关于以下列传统方式之一导入库。

首先：

import _ from ‘lodash’;

第二：

const _ = require('lodash');

这将如何影响项目文件的最终大小。

导入整个程序包时调整项目文件的大小

▍2。ES6导入

同样，在这里，我们有两个选择。

首先：

import { get } from 'lodash';

第二：

const { get } = require('lodash');

让我们看一下这种导入对项目文件大小的影响。

使用破坏性分配导入get函数时的文件大小

如您所见，使用以上两种方法都导致文件大小增加了约23 Kb。这是非常重要的增长，特别是考虑到我们正在谈论使用库中的单个函数，其中包括200多个函数。结果，事实证明，如果在项目中使用所有这200个功能，则捆绑包的大小增加的幅度与人们预期的一样大。

使用唯一必要的功能，也许23 Kb的价格不是很高吗？不，太过分了。

有什么方法可以只将需要的内容导入项目？是的，有这种方法。

让我们分析一下Lodash材料存储的文件夹。

为此，只需沿着小路走即可node_modules/lodash。在此文件夹中，您可以找到许多文件，其中存储了各个功能的代码。其中，很容易找到get.js我们感兴趣的功能代码所在的文件get。这意味着如果我们只需要一个函数，get仅将该文件导入项目就足够了。这导致我们导入第三种方法。

▍3。从Lodash导入get.js文件

同样，这里有两种方法。

首先：

import get from 'lodash/get';

第二：

const get = require('lodash/get');

看一下调整包的大小。

导入get.js文件时的文件大小

可以看出，由于我们仅将文件导入到项目中get.js，因此，使用其他方法时，我们可以摆脱20 kb以上不必要代码的束缚。但是我们只在谈论一个包。一个典型的JavaScript项目具有更多的依赖关系。想象一下，谨慎的导入包方法和对包大小的不断控制会如何影响服务器或客户端项目。

所有软件包都支持选择性导入方法吗？

不，不是全部。这完全取决于软件包文件的组织。但是，幸运的是，大多数相当大的流行软件包都是经过结构设计的，因此，与它们一起使用，可以很容易地组织有选择地导入其个人功能。

与其他库一起使用时如何做？

删除未使用的代码的过程称为摇树。例如，如果您需要“摇树”，请在Internet上搜索“ antd tree shake”一词。您可能会在StackOverflow或GitHub上找到有关此主题的讨论。找到了这样的讨论-查看它-很有可能有人已经在您之前解决了任务。

摆脱不必要代码的另一种方法需要更多的精力。您需要进入位于中的package文件夹node_modules，并进行代码分析。特别是，您应该对项目的结构感兴趣，并确定是否将其划分为可以彼此独立地导入到项目中的小模块。

使用antd包导入优化示例

之前：

import { Menu} from 'antd';

后：

import Menu from 'antd/es/menu';
import 'antd/es/menu/style/css';

使用material-ui包导入优化示例

之前：

import { Button } from '@material-ui/core';

后：

import Button from '@material-ui/core/Button';

使用moment包导入优化示例

优化库的导入时间看起来有些复杂。因此，如果你需要它，看一看的任务，我在这个库的任务跟踪器创建的。

摘要

您自己可以确保许多不必要的代码进入您的项目。您可以通过仔细比较导入内容和使用内容来解决此问题。例如，这将使您减少站点的加载时间。因此，建议您仔细监视项目包的大小并优化依赖项导入。

在您的JavaScript项目中，您如何努力导入不必要的代码？

停止导入整个JavaScript包