将我的整个应用程序连接成一个HTML，JS和CSS文件

Question

我构建了一个AngularJS应用程序，其结构类似于：

theprojectroot
|- src
|     |- app
|     |     |- index.html
|     |     |- index.js
|     |     |- userhome
|     |     |     |- userhome.html
|     |     |     |- userhome.js
|     |     |- management
|     |     |     |- management.html
|     |     |     |- management.js
|     |     |- social
|     |     |     |- social.html
|     |     |     |- social.js
|     |- assets
|- vendor
|- package.json

显然，有更多的目录和js文件，但我的想法是我将应用程序的每个组件放在不同的目录中，包括其HTML页面（使用{{1加载到index.html它和它的JS文件，包含它的Angular模块，控制器等。

我想把我的应用程序投入生产，我记得在某个地方读到这可以而且应该这样做，结果只有三个文件。

• theproject.html
• theproject.js
• theproject.css

我一直在做一些研究和谷歌搜索这样的解决方案，最好是使用Grunt。但是，我没有找到任何关于如何执行此操作的说明。

有人能指出我的方向或提供如何实现这一目标的说明吗？

谢谢！

Answer 1

您可以使用grunt任务自动连接所有文件 https://www.npmjs.com/package/grunt-concat-css

https://github.com/gruntjs/grunt-contrib-concat

只是一些例子，但它可以节省一些时间从复制意大利面

Answer 2

我不知道有没有软件解决方案，但没有。

• 最简单的是.css文件，只需将它们复制在一起即可。如果您需要为IE添加特殊的.css，则无法执行此操作，但大多数应该适合一个（或两个）请求。将它们按照您加载它们的顺序复制在一起，以免破坏任何被覆盖的内容。如果您想进一步减少网络延迟，请将其内联。
• JS有点困难。一个文件可能不好，因为您不应该修改默认的角度脚本，但是将所有代码放在一个文件中应该有效。确保连接任何onLoad函数。您可以尝试将其粘贴在角度代码下方，但最好先预测它。同样，您可以内联您的代码。
• 可能是大多数网络密集型但也是最困难的文件是html文件。
  • 如果你需要在服务器端进行一些预处理，那你就不走运了。尝试将其导出为API。
  • 如果是静态html，您有2个选项。第一个是在一个（嵌入式）json文件中获取所有HTML，然后从ram＆＃39;中加载它。更好的方法是在theproject.html中嵌入所有代码并隐藏它，直到您加载＆＃39;那个页面。这可能是最高效的方式。

如果您需要原始加载速度，请提供其他一些提示：

• 缩小并压缩您的html，js和css文件。
• 激活gzip
• 使用第二个请求加载您不需要在索引页面上呈现的数据，这样浏览器就不必等到获取所有这些数据。如果您的应用程序很大，这将大大缩短第一页呈现的时间。内联您的控制器和索引页面所需的css部分，然后获取其余部分。您的页面可以在两次网络请求后呈现。