包装第三方JS& CSS库以及我的项目资产？ [英] Is there a benefit to pack third-party JS & CSS libraries along with my project assets?

问题描述

我想开始使用缩小工具，例如缩小， Uglify 或关闭加速我的页面加载。

我的项目依赖于一些庞大的库（ jQuery ， Bootstrap ，...）。

我正在考虑两种选择：

选项1：使用官方CDN

• 只将我的项目文件分为一个 .css 和一个 .js file


• 服务来自着名的 CDN

这看起来像这样：

 < script src =（my cdn）/myproject.min.js>< / script> 
< script src =（official cdn）/jquery.min.js>< / script> 
< script src =（official cdn）/jquery-ui.min.js>< / script> 
< script src =（官方cdn）/bootstrap.min.js>< / script> 
 
< link rel =stylesheethref =（official cdn）/bootstrap.min.css>< / link> 
< link rel =stylesheethref =（my cdn）/myproject.min.css>< / link> 
  

优点：

• 访问者可能已经拥有某些库的缓存版本，由另一个网站的同一个官方CDN提供服务，从而避免了多余的传输。
  

缺点：

• 如果他们不这样做，这种方法需要多次HTTP调用（即使他们真的做到了，仍然发出请求并获得 304 Not Modified ），这会增加页面加载时间。
  

  选项2：将所有内容打包到一起

  
  
  
  
  
  • 将我的项目文件+每个库的源文件缩小为一个
    
    
    

    这看起来像这样：
    
    

     < script src =（my cdn）/myproject-and-libraries.min.js>< / script> 
    < link rel =stylesheethref =（my cdn）/myproject-and-libraries.min.css>< / link> 
      

    优点：
    
    

    
    
    
    
    
    

    缺点：
    
    

    
    
    • 即使用户已经加载了jQuery&从另一个网站的Bootstrap代码，他将不得不重新从我的全部东西。
    
    
    
    
    

    最后的笔记

    
    
    

    在任何一种情况下，我都会从我自己的CDN中为我提供静态文件（只有自己编译的文件） AWS CloudFront ，所以问题不在于使用CDN或者哪个更好。
    
    

    真正的问题是：用我自己的软件包打包第三方库吗？
    

    解决方案

    这取决于。

    
    
    

    您应该尝试将所有内容打包在一起，测量文件大小，并查看您存储多少空间与单独的库文件。您至少可以将保存与其他因素进行比较。

    
    
    

    如何平衡HTTP请求与总字节数之间的关系取决于您。如果您的许多用户使用移动连接，则额外的HTTP请求可能会更受关注，因为您在移动连接上可能会产生额外的延迟。

    
    
    

    我认为，在现代浏览器中的两个选项中，HTTP请求将并行进行（即使是旧的浏览器也会每个域一次发出两个HTTP请求）。不确定移动浏览器。

    
    
    

    很难判断有多少用户第一次访问您的网站时可能已经缓存了图书馆CDN版本。我认为我记得阅读的东西表明它的用户比你想象的要少（可能来自雅虎的一些数据，其中大约25％的用户已经缓存），但是我找不到该参考文献。

    
    
    

    值得一提的是，您期望各种文件的更改频率如何。如果您每周或每两周更新自己的JavaScript，但将库和插件保持在同一版本上几个月/年，那么将这些文件分开保存是值得的，这样返回的用户就不必重新下载一个大的文件因为你改变了你自己的JavaScript的一行。

    
    
    

    说实话，如果你已经在缩小，从CloudFront中进行缩减和服务，那么当人们做从你那里下载文件，无论如何，它们会很快就会下降。在每个用户的第一次空闲缓存访问您的网站后，您的文件也将被缓存。总体来说，我不认为你会看到这些选择之间的巨大差异。

    
    
    

    第三方CDN的一个明显缺点是你根本没有权力来修复他们如果他们出了错。

    
    

    I want to start using minifying tools such as Minify, Uglify or Closure to speed up the loading of my pages.

    My project relies on several bulky libraries (jQuery, Bootstrap, ...).

    I'm considering two options:

    Option 1: use an official CDN

    • Minify only my project files into one .css and one .js file
    • Serve the (minified) major libraries from a renowned CDN

    This would look like this:

    <script src="(my cdn)/myproject.min.js"></script>
    <script src="(official cdn)/jquery.min.js"></script>
    <script src="(official cdn)/jquery-ui.min.js"></script>
    <script src="(official cdn)/bootstrap.min.js"></script>
    
    <link rel="stylesheet" href="(official cdn)/bootstrap.min.css"></link>
    <link rel="stylesheet" href="(my cdn)/myproject.min.css"></link>
    

    Pros:

    • Visitors might already have a cached version of some of the libraries, served by the same official CDN from another website, thus avoiding redundant transfers.

    Cons:

    • If they don't, this approach will require several HTTP calls (even if they do actually, they will still make a request and get a 304 Not Modified), and this will increase the page load time.

    Option 2: pack everything together

    • Minify my project files + the source files of every library, into one single huge file.

    This would look like this:

    <script src="(my cdn)/myproject-and-libraries.min.js"></script>
    <link rel="stylesheet" href="(my cdn)/myproject-and-libraries.min.css"></link>
    

    Pros:

    • Number of HTTP calls limited to the strict minimum.

    Cons:

    • Even if the user has already loaded the jQuery & Bootstrap code from another website, he will have to reload the whole stuff from mine.

    Final note

    In either case, I will serve the static files (only the ones compiled by myself) from my own CDN at AWS CloudFront, so the question is not about using a CDN or not, or which one is better.

    The real question is: pack the third-party libraries with my own, or not?

    解决方案

    It depends.

    You should try packing everything together, measure the file size, and see how much space you save versus separate library files. You can at least then compare that saving against other factors.

    How you balance HTTP requests vs. total bytes is pretty much up to you. If lots of your users are on mobile connections, additional HTTP requests might be of more concern, because of the extra latency you tend to get on mobile connections.

    I think under both options in modern browsers, the HTTP requests will be made in parallel (even old browsers would make two HTTP requests at once per domain). Not sure about mobile browsers.

    It's difficult to judge how many users are likely to have the library CDN version already cached when they first visit your site. I think I remember reading something that suggested it was fewer users than you might think (possibly some data from Yahoo, where about 25% of users had it cached), but I can't find the reference.

    It's worth considering how often you're expecting the various files to change. If you update your own JavaScript every week or two, but keep your libraries and plugins on the same version for months/years, then it might well be worth keeping those files separate so that returning users don't have to re-download one big packed file just because you changed one line of your own JavaScript.

    To be honest though, if you're already minifying, gzipping AND serving from CloudFront, then when people do download files from you, they're going to be coming down pretty damn quickly anyway. And after each user's first empty-cache visit to your site, your files will be cached too. Overall I don't think you'll see a big difference between these options.

    One definite drawback of 3rd-party CDNs is that you have no power at all to fix them if they go wrong.

    这篇关于包装第三方JS& CSS库以及我的项目资产？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！