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

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

这样会带来:

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

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

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

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

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

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

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

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

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

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

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

  • 如何灵活开发一个配置表编辑器?
  • jquery面向过程写todomvc
  • webuploader如何实现一个页面多个上传demo?
  • js是否可以实现弹出框中包含一个可编辑的文本框?如何实现
  • 算法:给出一个数,比如50,求有多少种组合相加等于这个数?
  • vue.js使用v-for循环遍历的值如何加到dom节点的class中
  • 请问html ul块比别的宽怎么解决?
  • 关于JS创建数组的问题求大神指教。
  • jquery如何给同一个对象的同一个事件绑定多个函数?
  • 关于函数重复执行的问题
  • 问个问题,有木有相关npm包解决类似于jquery的getScript()方法的