使用 browserify 在浏览器中缓存

Question

如果我使用 CDN 通过多个 'script' 标签向我的客户端提供 jquery 之类的 .js 库或 react ，那么浏览器会缓存这些文件并在以后重用它们而不是请求它们再次加快初始加载时间。

使用 browserify，所有 .js 库都被捆绑到一个 .js 文件中，那么客户端不需要每次都下载整个 .js 包吗？这不会使初始加载时间变慢吗？

例子，

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js')>
//get from cache if present
<script src='mycomponents.js'> // should get from server

使用 browserify ，

<script src='mybundle.js'> // 包括 jquery + mycomponents ，总是来自服务器

Answer 1

CDN 的缓存 headers 配置方式意味着浏览器不必每次都下载文件。

如果您希望浏览器缓存它们，您可以使用 headers 显示的 on this page 来提供您的资产。

Answer 2

根据您使用的服务器，它会告诉客户端浏览器是否可以从缓存中提供文件。通常，如果您的脚本被修改（这意味着任何捆绑的脚本），或者当它是第一次访问时，客户端需要请求整个捆绑。如果没有，它会发送304状态码，说可以使用缓存文件。

如果您使用CDN，客户端很可能不需要下载所有依赖项，因为他可能在访问其他网站时已经缓存了它们。首次访问或更新时，唯一要下载的文件是组件的脚本，该脚本可能会更频繁地更新，或者缓存会更快过期。

Browserify 有利于生产力和依赖管理。如果您正在寻找性能，我建议您使用 CDN。

但请记住，CDN 可能会失败，因此最好在您的服务器上使用故障转移脚本

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script>if (typeof jQuery === "undefined") { document.write('<script src="assets/js/jquery.min.js">\x3C/script>') }</script>

使用 browserify 在浏览器中缓存

Cache in browser with browserify

browser

browserify

browser-cache

cdn