Skip to content
eric edited this page Oct 9, 2016 · 3 revisions

打包合并

FIS-Plus提供静态资源管理系统,支持通过运行时计算静态资源使用情况来加载对应的静态资源。为了达到合理的高性能的加载方式,用户可以将静态资源进行合并。

配置

用户可以在配置文件中,通过配置将静态资源进行合并处理,对demo-home模块增加打包配置:

//fis-conf.js
fis.config.set('pack', {
        //打包所有static目录下的JS文件
        'pkg/aio.js' : /^\/static\/(.*\.js)$/i,
        'pkg/widget.js' : [
            /^\/widget\/ui\/(.*\.js)$/i,
            '/widget/menu/menu.js'
        ],
        //打包所有的css文件
        //将内容输出为static/pkg/aio.css文件
        'pkg/aio.css' : '**.css'
});

打包配置支持正则、字符串以及通配符,用户可灵活根据自己需求进行资源打包,同时注意以下打包细节:

  • 每个包只对应js或css类型,请勿将其他非同类文件配置合并至包内,特别是使用通配符配置时,请注意目录下是否有其他非同类型文件
  • 使用正则配置时需要添加定界符,不然将会达不到用户配置预期

输出结果:使用命令 fis release --pack --md5 --dest ./output 编译项目,然后到output目录下查看产出的home-map.json内容.fis内置的 打包原理 与传统的打包概念不同,fis的打包实际上是在建立一个资源表,并将其描述并产出为一份map.json文件,用户应该围绕着这份描述文件来设计前后端运行框架,从而实现运行时判断打包输出策略的架构。

打包策略

  • 每个资源包之间不会有重复资源,合并处理包时会根据配置节点顺序,将资源合并至资源包中。
  • 根据资源包配置的匹配规则,进行资源顺序排序。
  • 每个资源包中的静态资源,会根据文件之间的依赖关系进行自动排序。

基本打包原则

  • 根据静态资源复用率情况,可将复用率较高的可合并在一起,复用率较低的可合并一起,同时可根据使用情况对静态资源不进行打包。
  • 在common模块中,可以根据其他业务模块使用common资源情况进行打包,将复用高的资源合并打包,将个别模块使用的资源独立打包。
  • 需要独立加载的JS组件资源,可不合并在包中,运行时会自动按需加载。
  • 对匹配成功的资源会合并进资源包中,同时其依赖的资源会记录在资源表中,如果需要加载资源包时,会先加载依赖的文件。

自动打包

手工维护资源打包工作存在未能及时排除废弃资源、需持续维护、成本大等缺陷。针对此问题,FIS提供静态资源自动合并服务自动生成资源打包配置,根据网站页面pv以及页面静态资源使用情况,自动计算静态资源合并方案,减少人工管理静态资源成本和风险

自动打包使用方式与现有一致,接入简单。提供简版和高端版两个版本:

  • 简版:只需安装一个插件便可使用自动打包。在编译过程中扫描模块代码分析资源依赖,提供页面级别的打包配置,支持重点页面权重等配置
  • 高端版:基于线上资源统计计算整站最优打包方案,支持国际化等复杂使用场景。

具体使用可以进入官网查看此文档