minified bundle JS和外部库

时间:2011-10-30 23:59:57

标签: javascript jquery minify

我想尽可能减少网站上的HTTP请求。

是否可以在一个大的缩小文件中缩小所有JS,包括jQuery等外部库?

4 个答案:

答案 0 :(得分:9)

是;这是完美的,也是常见的做法。

但是,您可能更愿意从Google的CDN加载jQuery,而不是将其包含在捆绑包中 这为已经在其缓存中安装了Google jQuery的用户节省了时间。

答案 1 :(得分:2)

我同意其他答案,这很好,但会添加以下注意事项:

  • 正如SLaks所提到的,我认为最好使用google CDN进行jquery。 Jquery大约是60k,我相信大多数人都会在google的浏览器上缓存它。如果您使用此CDN,则很大一部分用户根本不需要下载此CDN。另外,如果您不是自己提供CDN服务,您将获得CDN的额外好处。

  • 我假设您计划从头部加载这个单独的JS。这通常是一个坏主意。头部的Javascript会阻止身体的加载。您希望将Head中的javascript限制为页面中其他脚本可能依赖的最小量。这通常包括Jquery。因此,即使这意味着额外的请求,我坚信最好在顶部放置一个脚本,其中脚本包含用于呈现身体的依赖项,然后是包含其他所有内容的第二个更大的脚本。或者更好的是最后一个脚本在顶部创建一个动态创建的脚本标记,以异步方式加载其余的JS。

以下是该页面结尾脚本的示例:

<script type="text/javascript">

    (function () {

        var script = document.createElement('script'); 
        script.type = 'text/javascript'; 
        script.async = true;
        script.src = 'http://mysite/js/mybigminifiedandmergedscript.js';
        var s = document.getElementsByTagName('script')[0]; 
        s.parentNode.insertBefore(script, s);
    })();

</script>
  • 如果你有很多脚本,如果没有加载就不会干扰你的页面的用户体验,我会把它放在第三个脚本中,就像上面的脚本一样加载,但推迟到文档完成之后。这样,该脚本不会干扰页面的“感知”性能。它静默加载,没有旋转的浏览器图标或进度条。

  • 如果您使用的是.net,我建议您使用我的OSS RequestReduce,它可以缩小和合并css和javascript以及sprite并动态优化图像。所有这些都无需更改代码。它可以在Nuget和RequestReduce.com上找到。

答案 2 :(得分:1)

经常这样做。请注意整个开发团队在js文件中知道什么是什么,什么不知道。我不能告诉你有多少次我看到一个客户的网站包含两个或三个或更多的jQuery实例,有时因为有人忘记它已经在一个缩小的主文件中。

答案 3 :(得分:1)

一如既往 - 这取决于应用程序。虽然我同意上述所有要点,但是一种老式的工程方法将会产生依赖于始终连接到互联网的依赖性以进行一些优化。

我们有一个浏览器应用程序需要jquery,jquery ui,d3js,它们相关的css,当然还有我们自己的代码才能运行。 此外,客户端需要能够编辑源html以生成变体布局。

所以我们选择了一条简单的“不要触摸”线,其中所有的魔法js和css都是谎言。 我们还选择了CDN方法,以便可以离线编辑html

因此,我们以极低的性价格提供了更强大的解决方案。