Question

我计划很快部署我的单页面应用程序应用程序，而且我对于使我的应用程序生产就可以进行优化的经验不足。

我将所有源文件（Js，CSS）合并并缩小。我将它们用于生产环境。

目前，我正在使用所有依赖项的缩小版单独。我检查了很多现有的网站，他们也做了同样的事情。例如，AngularJS网站单独加载其依赖项。

AngularJS依赖

  <script src="google-code-prettify/prettify.min.js"></script>
  <script src="js/homepage.js"></script>
  <script src="js/download-data.js"></script>
  <script src="js/angular-ui-bootstrap.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular-resource.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular-route.min.js"></script>
  <script src="https://cdn.firebase.com/js/client/1.0.18/firebase.js"></script>
  <script src="https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js"></script>
  <script src="//code.angularjs.org/1.3.0-beta.18/i18n/angular-locale_sk.js"></script>

一位同事向我们提出了将源和依赖关系一起加入两个文件的想法，例如： scripts.min.js （这将包括源代码和依赖关系的JS代码）和 styles.min.css （这将包括源和依赖项的CSS代码）。

问题：这是个好主意吗？有什么缺点吗？

我看到了一些关于此的现有帖子，但我也无法从他们那里得到一致的答案。

Answer 1

减少应用程序发出的HTTP请求数量是一个好主意。文件越少意味着页面加载时的HTTP请求越少。在开发过程中，将应用程序和供应商依赖关系分开是有利的，因为您的应用程序文件经常更改，但供应商文件可能不是那么多。在制作中，如果您愿意，可以连接和缩小，甚至可以进行uglify。较少通常是最好的。

此外，如果您在Node.js环境中进行开发，您可能需要查看Gulp或Grunt等任务运行程序，这些工具是以这种方式处理资产的绝佳工具。

Answer 2

我相信在大多数情况下将脚本和css捆绑到一个文档中是一个很好的方法。您将获得对服务器请求较少的优势 - 而且从我在fiddler中看到的情况来看，您的浏览器只能同时发出这么多请求。

不确定如何将CDN资源捆绑到单个文件中。

捆绑和缩小我可以想到的一个缺点是，当你的js出现在生产中时会发生问题会更加困难，因为你的所有空格和变量名都被删除了。

我确信除此之外还有更多的优点和缺点，但我认为最后的调用是对你想要的一些看法...更快的加载但是更严格的调试，更容易调试但稍慢负载等

Answer 3

我认为这取决于你的情况。在我的头顶......

<强>优点：

减少http请求
一切都在一个地方
加载时间更快（我建议进行比较，看看差异是否可以忽略不计）

<强>缺点：

难以调试
失去组织
依赖项与您的源代码之间没有分离

就个人而言，我会选择dependencies.min.js＆amp; .css，source.min.js＆amp; .css方法。你永远不会改变依赖的代码，所以我不认为将它们保存在一个地方会有一个主要的缺点。但是，你自己的源代码会不断变化，我认为为了组织起见，我会把它分开。如果您认为这不是一个大问题，请继续将它们全部合并到一个文档中。

我会进行一些测试 - 看看压缩版本是否显着改善了加载时间。对于像您这样的小型应用程序，有时优化并不像在大型项目中那样值得。

如何为生产准备js文件？

3 个答案: