广东做网站:jQuery如何删除不必要的模块

2019.09.16 广东做网站

140

jQuery无疑是最受欢迎的JavaScript库,(几乎)在这个星球上每一个网站都是使用它。 这影响到jQuery中包含所有的功能库覆盖每一个实例和可能性。

然而,当我们以一个简单的网站,我们可能只使用 几 的功能。 因此,它将更有效,如果我们能够只运行必要的函数,而不是所有其他未使用的函数。 我们可以排除一些不必要的jQuery模块在您的项目。 所以,让我们看看我们如何能做到这一点。

推荐阅读: 创建一个音量控制器与jQuery UI滑块

第一件事首先

首先,我们需要安装一些工具需要做这项工作。 这些工具 Git , 咕哝着说 , node . js 。 如果你运行在macOS,最简单的方法来安装所有的这些工具都是通过一个macOS包管理器调用 家酿 。

安装自酿酒

让我们打开终端,运行以下命令安装自制程序。 作为说,自制程序将让我们更容易安装其他提到的工具。

安装Git

自制程序安装完成后,运行以下命令安装Git。


安装node . js

运行以下线安装node . js

1
酿造安装节点
安装繁重

最后,我们需要安装咕哝。 运行此命令。

1
npm安装- g grunt-cli

如果您使用的是Windows,有一个类似的包管理器调用 巧克力色 你可以以类似的方式使用上面安装包。

jQuery构建

目前,jQuery允许以下模块被排除在外。

模块命令描述
Ajaxajax这指定了 jQuery AJAX API 包括 jQuery.ajax () 。jQuery.get () , .load () 函数
CSS但css这指定了从jQuery函数 CSS类别 包括 .addClass () ,. css () , .hasClass () 。
弃用弃用这指定了弃用模块或函数。
事件的别名-event-alias这将指定 事件函数 就像 .click () , .focus () ,.hover () 。
这指定了 函数设置CSS维度 。 这些功能包括 .height (), .innerHeight () , .innerWidth () 。
影响影响这个指定的功能设置动画效果,如 .slideToggle () ,.animate () 和 .fadeIn ()
抵消抵消这将指定 retrieve45坐标和位置的函数 。 这些职能之一包括 .offset () 和 .position () 。

我们可以定制jQuery之前,我们需要克隆它从Github回购在终端运行此命令。

1
git克隆git:/ /github.com/jquery/jquery.git

你应该找一个新文件夹命名 jquery 您的用户文件夹下创建的。 使用这个命令导航到该目录。

1
cd jquery

接下来,我们需要安装节点模块的依赖关系来运行我们的项目。

1
npm安装

然后我们建立我们的jQuery只需运行繁重命令(点击进入)

1
咕哝着说

它将返回以下报告,如果操作成功。

grunt report

从报告中我们可以看到,我们广东做网站的jQuery内保存 dist / 文件夹中。 我们的jQuery,在这一点上,所有的功能,因此,大小是相当大的, 265 kb 。 在83 kb的简化版。

广东做网站

删除模块

我们说,我们希望从jQuery删除模块的影响; 我们可以运行这个命令。

1
繁重的定制:影响

如果我们回顾文件大小,现在下降到 246 kb 。

jquery custom build

排除了多个模块,每个模块用逗号分开,例如:

1
繁重的定制:影响,ajax,弃用

这肯定会进一步降低jQuery文件。 在我们的例子中,它只是减少 207 kb

最后认为

jQuery可以帮助我们很容易操纵DOM,但是有200 kb大小,它可以影响你的网站的性能。 通过消除一些不必要的jQuery模块,jQuery脚本肯定会跑得更快、更有效。 我们希望这个小技巧将为您的下一个项目是有用的。


最新案例

寒枫总监

来电咨询

400-6065-301

微信咨询

寒枫总监

TOP