Question

我的想法是拥有一个非常精简的index.html文件，现在它是一个像这样的开发模式中的脚本标签的文章

<html>
<body>
  <script></script>
  <script></script>
  <script></script>
  <script></script>
  <script></script>
  <script></script>
  <script></script> 
<!-- etc -->
</body>

我以为我可以通过使用

来做到这一点

<html>
   <body>
   <link rel="import" href="imports.html"
   </body>

使用imports.html看起来像

<script></script>
<script></script>
<script></script>
<script></script>
<script></script>

但我得到各种喷油器错误。那么主要问题是这种方法会有一些调整吗？

Answer 1

是的，使用gulp with browserify让你像nodejs一样使用require标签，它会将你的依赖链构建到一个捆绑文件中，然后你可以使用uglify和gzip来大大降低你的加载时间。 Gulp有很多模块可以帮助解决这个问题。我也推荐浏览器同步。

我把我的负载分成两个文件，一个需要所有角度依赖的depends.js，以及一个更轻的应用程序代码的app.js。我使用watchify来监视我的browserify链，当它触发它时不必更新所有依赖项，它会缓存不变的文件，因此我的实时重新加载非常快。这也可以设置为在css之前从head标签异步加载依赖项，这可能会产生重大影响，因为它包含大部分负载。此外，当使用browserify时，您的源代码更加清晰，因为它为您构建了所有匿名函数包装。

我应该注意到我的app.js从不在物理上需要depends.js，因为它会绑定到1个包，这会减慢实时重新加载版本，并且不会允许你做聪明的推送，允许depends.js保持缓存在客户端上。它只是假设已经在窗口对象上定义了角度，保证它（如下所述）。

我在prod中使用相同的设置，因为它有利于我的加载时间，chrome dev工具网络选项卡显示我的所有脚本异步加载。如果加载异步，您可能需要将应用程序代码包装在函数中并在依赖代码的末尾执行它，否则您的应用程序将尝试在加载之前调用angular，因为应用程序代码通常很多小于它的依赖。

以下是代码清洁程度的示例 - angularjs browserify

Angular - 将脚本放在自己的导入文件中

1 个答案: