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

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

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

这样会带来:

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

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


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

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


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/

【热门文章】
【热门文章】