关于组件化开发的问题

[Phlicess]

看了你的文章，有一些问题想请教一下。

1. 每个组件里面有就近维护的css和js文件，那么在加载页面的时候会不会有太多的请求数而影响性能？
2. 组件拼装如果不用reactJS的话，应该怎么弄呢？

[zhoukekestar]

一起讨论一下吧，https://github.com/tmallfe/tmallfe.github.io/issues/34 你说的这种，一般都会combo的，把需要的模块的css和js分别打包成一个css和一个js，然后加载就行了。

[fouber]

@Phlicess

开发代码和部署代码中间经过了构建过程的，所以最终上线以后，资源会被合并请求，并不影响性能，甚至可以根据模块化的依赖关系更好的管理资源加载，做到非常精确的按需，性能更高

[jincdream]

我这边为自己封装实现了一个这样的插件（暂时还不能通用，没写好readme）

核心还是 资源依赖表。 在页面编译之后

• 会把该页面的所有 同步依赖模块（js、css） 合并成一个 combo url链接，然后replace到页面上。
• 会把该页面的所有 异步依赖模块 输出一份配置表，用来给浏览器进行加载，该配置表包含了 异步模块 的所有依赖，并且剔除了已经合并过的同步依赖模块。
• 可以配置combo url 的合并顺序，支持分组combo。

代码参考 （暂时未整理）：https://github.com/jincdream/fis3-postpackager-autocombo/blob/master/index.js

[nimoc]

构建工具 + 根据业务情况合理使用合并请求解决请求数的问题 假设 fis + webpack 或者 gulp + webpack

1. css 可以选择嵌入到 js ，或者所有依赖模块的 css 都用less打包在 view/login/index.less 页面只引入 /view/index/index.less 。甚至将css 嵌入到 html
2. js 文件用 webpack 打包即可。这方面的优化要看 webpack 的 externals
3. 图片资源必要时可以嵌入 css ，尽量用 iconfont

就近维护大法好，就近维护老板再也不用担心时间都浪费在找文件上。

[ystarlongzi]

@nimojs fis 自身就可以很优雅的解决这个问题，不用也没必要和 webpack 搭配使用

[nimoc]

@ystarlongzi JS异步加载JS是个问题 fis 纯前端的打包方案并不理想。

[ystarlongzi]

@nimojs fis 支持异步加载 js 的啊，我一直都是这么用的，之前使用 requirejs，现在使用的是百度的 modJs。 fis3-postpackager-loader

[nimoc]

@ystarlongzi modjs 全部是异步加载，而有时候我们需要文件模块直接被打包在一个文件。当需要异步的时候再用 require.ensure 异步加载。所以需要 webpack 来处理所有JS相关的代码

[ystarlongzi]

@nimojs 嗯嗯。不过现在 modJS 里也有require.ensure语法了.mod.js#L219-L223

[LeeJim]

类似TAB这样既有交互性又有容器性质的组件，应该如何开发和使用呢？

在不使用react.js的情况下。按照在 #10 上组件化开发的思想。