如何整合、管理项目中大量CSS和JS文件

Question

Web项目中经常会出现引用了大量外部css或者js插件、库、框架的情况，如下图（为了体现情况，特意夸张处理）：

这样会带来：

1.性能问题
2.管理维护问题

那么该如何管理这些js、css文件呢？有没有比较完善的解决方法？

Answer 1

ASP.NET 的 Bundle 就解决了这一个问题，通过 Bundle 的方式来整合资源。
Webpack 把 css 和 js 都当作模块来处理，也很好的解决了这个问题（当然会带来一些其它问题，另说）。

参照目前 js 常用的工具框架，gulp、grunt、甚至包括 TypeScript、Babel，这些工具都是为了模块化 JS 常用的，但归根到底，是基于一种思想：模块化

模块化之后就存在一个管理和引用的问题，于是很多思想就参照非解释性语言的方式，把过程解成：开发→构建(打包)

JS 的模块化工具很多，上面已经提到了，上网搜一搜也能找到大堆的 JS 模块化方面的内容。CSS 的模块化，在上面有些工具也支持，但是另外还有 CSS 预处理器，比如 LESS，SASS 等。

总的来说就是：模块化开发→构建(打包)发布

Answer 2

通过配置文件, 打包合并压缩
按需加载, 处理依赖
在 view 层做 uimodule/widget
方法有很多, 细节实现各不同
其实组件都自己做的话, 一般不会有那么多需要同时引用的外部资源

推荐使用这个项目 http://seajs.com/

Answer 3

现成的minify拿来用
minify：http://code.google.com/p/minify/

更科学一点 写一个loader 本机资源独立 便于调试 上线自动拼接minify并加时间戳
如果需要对线上进行调试 再写一个浏览器插件 分拆minify