fis icon indicating copy to clipboard operation
fis copied to clipboard

fis怎么解决seajs模块按需求引用的问题

Open ioriandy4 opened this issue 10 years ago • 11 comments

用seajs开发,例如写了10个模块,有10个页面,每个页面引用其中一个模块,,,如果用fis把10个模块合并压缩在一起,那每个页面都引用进去了合并后的10个模块,,,会浪费,,,怎么解决呢??

ioriandy4 avatar May 14 '15 09:05 ioriandy4

你不配置 pack 不就可以了吗?

oxUnd avatar May 14 '15 09:05 oxUnd

例如页面1引入了4个模块,页面2引入了另外6个,,想配置pack合并下怎么办

ioriandy4 avatar May 14 '15 09:05 ioriandy4

就看页面1重要还是页面2重要了,哪个 PV 大就偏向哪个;打包本来就是个统计问题;

oxUnd avatar May 14 '15 09:05 oxUnd

不能检测到页面1引入了4个模块,就自动合并那4个模块,生成一个新文件自动引入页面1这样子吗?最终的目的就是不想一个页面引入用不到的模块。。。

ioriandy4 avatar May 14 '15 09:05 ioriandy4

@ioriandy4

image

比如你有两个页面A和B,因为两个页面有不同的功能模块,我们可以继续假设:

  • A页面使用了资源:a.js, b.js, c.js, d.js
  • B页面使用了资源:a.js, b.js, e.js, f.js

问题一:将每个页面的资源都合并成一个请求就是性能最好的么?

image

当用户访问A页面时,需从服务器下载 a-b-c-d.js ,接下来又去访问B页面,由于B页面引用的资源的url和A页面不同,所以浏览器又从服务端下载了资源 a-b-e-f.js ,很明显,这一次资源加载中的a-b内容是冗余的,我们本来在访问A页面时就下载过同样内容了。

image

所以这种打包才更合理,多页面共享的资源合并在一起,页面独有的资源合并在一起,每个页面加2个资源,虽然请求多了,但整站的性能是更好的(不信你测试就知道了)

问题二:页面有冗余就性能差么?

还是这两个页面,假设绝大多数用户是通过直接访问A页面来到网站,然后走到B页面的,那么我们有充分理由要让A页面更快速的展现,因为它代表着用户对网站体验的第一印象,这很重要;同时,为了加快B页面的访问速度,需要让AB页面共享公共资源的浏览器缓存,一种可能的做法就是:

image

是的,对于B页面来说在a-b-c-d.js请求中加载了不需要的资源c-d,这种方案虽然有点违背直觉,但从统计的结果来看,它是合理的,因为我们前提假设了网站绝大多数入口请求访问的是A页面,而B页面的绝大多数访问请求会经由A页面到达。这种合并组合方案即优化了A页面的性能,也提升了B页面的性能。(不信你测一下就知道了)

你预期的

最终的目的就是不想一个页面引入用不到的模块

在真正的性能优化上其实未必正确,只是局部 “可能更优” 但页面的总体性能未必最优啊

fouber avatar May 14 '15 09:05 fouber

赞!说得太清晰了!

2betop avatar May 14 '15 10:05 2betop

谢谢

ioriandy4 avatar May 14 '15 10:05 ioriandy4

赞,等待书,价格定高点。。。哈哈哈

oxUnd avatar May 14 '15 10:05 oxUnd

赞一个

在真正的性能优化上其实未必正确,只是局部 “可能更优” 但页面的总体性能未必最优啊

ystarlongzi avatar Jul 10 '15 07:07 ystarlongzi

@fouber 我想收藏你的评论,咋整?每次都找半天

fancyboynet avatar Aug 04 '15 07:08 fancyboynet

@fancyboynet 点击时间你就明白了。

oxUnd avatar Aug 04 '15 09:08 oxUnd