javascript外部_如何外部化和缩小JavaScript

javascript外部

优化JavaScript代码的最有价值的方法之一可能会让您感到惊讶-完全将其从HTML文件中删除。 在我的课程《 JavaScript优化设计师指南》中的这段视频中，您将学习如何外部化和最小化JavaScript。

如何外部化和缩小JavaScript

如何外部化JavaScript代码

提高代码效率的一种好方法是使代码外部化和最小化。

当我们谈论将代码外部化时，我所谈论的是将我们所有JavaScript从我们HTML页面中删除，并将该JavaScript放入一个单独JavaScript文件（.js文件）中。

这很容易做到。 您只需将所有内容放入script标签中，将其删除，然后创建一个扩展名为.js的新文本文件。 然后，您只需使用script标记即可指向该文件。

所以这是一个例子。 我有一个带有JavaScript代码的index.html文件。 因此，我只需突出显示script标签中的所有内容并将其剪切即可。

然后，通过突出显示和删除它们，可以完全摆脱script标签。

然后，我将在我JavaScript文件夹中创建一个新JavaScript文件，并将其命名为site.js。

使用什么文本编辑器都没有关系。 我在这里使用Visual Studio代码，但您也可以使用方括号或任何其他纯文本编辑器。 但是我将其保存为site.js，然后将所有JavaScript代码粘贴到其中。

现在它还不能正常工作，因为我们还没有在HTML文件中指向此JavaScript。

但是我们可以跳回到index.html。 然后，在加载所有依赖项之后，我们将创建自己的script标签来加载刚刚创建的文件。

因此它位于我们JavaScript文件夹js/ ，然后将其site.js ，因此代码为：

<script src="js/site.js"></script>

这就是外部化JavaScript所需的全部内容。

如何缩小JavaScript代码

将JavaScript放在单独的文件中的最大好处之一是，您可以非常轻松地最小化或最小化该JavaScript代码。 而且，当您拥有代码的精简版本时，该精简版本将运行得更快，因为它将具有较小的文件大小。

阅读或编辑缩小的文件将很困难。 这就是为什么保存JavaScript的原始副本的原因，以便在需要进行更改时，可以对原始JavaScript文件进行更改，然后再次将其最小化。

现在，您如何缩小？ 有几种选择。

Visual Studio代码插件

大多数现代代码编辑器都具有可为您最小化JavaScript的插件。 例如，我正在使用Visual Studio Code。 如果我们转到扩展名并仅搜索“最小化”，则可以看到几个用于最小化代码的选项。

支架插件

另一个名为Brackets的免费在线文本编辑器也提供了一些扩展程序，可用于减少代码。 因此，如果您去括号的扩展管理器并搜索“ minify”，您将看到一个JavaScript缩小器。

请记住，在压缩代码后，您需要更改HTML文件中指向的文件。 因此，如果您将site.js缩小了，那么您将拥有一个可能称为site.min.js的新版本。 因此，在您HTML中，您需要指向该压缩版本，而不是代码的原始版本。 否则，所有缩小都是毫无意义的

JSCompress

如果出于某种原因，您只是喜欢使用记事本进行所有代码编辑，那么您仍然可以缩小尺寸，而做到这一点的一种方法是访问JSCompress之类的网站。

基本上，这仅允许您粘贴代码，然后单击“ 压缩JavaScript”按钮，您会看到这将我们的代码压缩了74％。

这只是JavaScript的很小一部分，因此您可以想象，如果页面上有很多JavaScript，这确实可以节省很多文件大小。 而且，当您拥有一个高流量的网站时，这确实会有所帮助。

外部化和最小化JavaScript的好处

外部化和最小化JavaScript的好处之一是，它使您可以更好地处理缓存。

举例来说，假设您要在网站的多个不同页面上使用大量JavaScript代码。 将这小部分JavaScript代码放入其自己JavaScript文件中是很有意义的，这样，一旦您的用户访问它一次，它就已经被缓存在浏览器中了。 然后，当他们访问另一个指向相同JavaScript文件的页面时，不必再次加载该JavaScript。 这样可以减少针对特定JavaScript的请求数量。

如果您希望将其带入一个新的高度，则可以使用内容分发网络（CDN）将JavaScript文件的版本存储在不同地理位置。 因此，您可能会将JavaScript存储在世界各地的服务器上。

这样做的好处是，如果您是在德克萨斯州创建网站的，而英国某人想访问您的网站，那么在没有CDN的情况下，该用户必须连接到您的服务器才能获取所需的所有文件。 。

但是，如果您JavaScript位于CDN中，那么很有可能在英国或欧洲某处的服务器上都有该JavaScript文件的版本。 因此它将更接近该用户的位置，这意味着它将更快地下载并更流畅地运行。

请记住，CDN确实要花钱，因此，如果您准备好进入下一个级别，那实际上只是您要追求的目标。 但这确实可以帮助您加快网站访问速度。

观看完整课程

在完整的课程中， 《 JavaScript优化设计师指南》将为您学习更多最适合Web设计人员的优化技术。 我将向您展示一些易于实现的技术，以使您JavaScript以及网站顺利运行。

您可以通过订阅Envato Elements立即学习本课程。 只需一个低廉的月费，您不仅可以访问此课程，还可以访问我们不断发展的图书馆，其中包含1,000多个视频课程和Envato Tuts +上行业领先的电子书。

另外，您现在可以从拥有460,000多种创意资产的庞大Envato Elements库获得无限下载。 使用独特的字体，照片，图形和模板进行创建，并更快地交付更好的项目。

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-externalize-and-minify-javascript--cms-30718

javascript外部