我构建了一个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页面（使用ui-router加载到index.html中）和JS文件，包含其Angular模块，控制器等。
我想将我的应用程序投入生产，我记得在某处读到可以而且应该这样做，以便最终结果只有三个文件。
- 项目.html
- 项目.js
- 项目.css
我一直在做一些研究和谷歌搜索这样的解决方案，最好使用Grunt。但是，我没有找到有关如何执行此操作的任何说明。
任何人都可以为我指明方向或提供有关如何实现这一目标的说明吗？
谢谢！
您可以使用一个
繁琐的任务来自动连接所有文件https://www.npmjs.com/package/grunt-concat-css
https://github.com/gruntjs/grunt-contrib-concat
只是一些例子，但它可能会为您节省一些复制意大利面的时间
我不知道
是否有软件解决方案，但有可能没有。
- 最简单的事情是.css文件，只需将它们一起复制即可。如果您需要为IE包含特殊.css，则无法执行此操作，但大多数应该适合一个（或两个）请求。按照加载它们的相同顺序将它们复制在一起，以免破坏任何覆盖的内容。如果要进一步减少网络延迟，请内联它。
- JS有点困难。一个文件可能不好，因为你不应该修改默认的角度脚本，但将所有代码放在一个文件中应该可以。确保连接任何 onLoad-函数。您可以尝试将其粘贴到角度代码下方，但最好事先对其进行测试。同样，您可以内联代码。
- 可能最网络密集但也最困难的文件是html文件。
- 如果您需要在服务器端进行一些预处理，那么您就不走运了。尝试将其导出到 API 中。
- 如果是静态 html，您有 2 个选项。第一个是在一个（嵌入式）json文件中获取所有HTML，然后"从ram"加载它。更好的方法是将所有代码嵌入
theproject.html并将其隐藏，直到您"加载"该页面。这可能是性能最高的方式。
如果您需要原始加载速度，其他一些提示：
- 缩小和压缩您的 HTML、JS 和 CSS 文件。
- 激活 gzip
- 加载不需要在索引页上呈现的第二个请求的数据，这样浏览器就不必等到获取所有这些数据。如果您的应用程序很大，这将大大缩短首页呈现的时间。内联您的控制器和索引页面所需的 css 部分，然后获取其余部分。您的页面可能会在两个网络请求后呈现。