详解PHP的Yii框架中自带的前端资源包的使用(4)

return [ 'components' => [ 'assetManager' => [ 'converter' => [ 'class' => 'yii\web\AssetConverter', 'commands' => [ 'less' => ['css', 'lessc {from} {to} --no-color'], 'ts' => ['js', 'tsc --out {to} {from}'], ], ], ], ], ];

如上所示,通过yii\web\AssetConverter::commands 属性指定支持的扩展语法, 数组的键为文件扩展名(前面不要.),数组的值为目标资源文件扩展名和执行资源转换的命令, 命令中的标记 {from} 和{to}会分别被源资源文件路径和目标资源文件路径替代。

补充: 除了以上方式,也有其他的方式来处理扩展语法资源,例如,可使用编译工具如grunt 来监控并自动转换扩展语法资源,此时,应使用资源包中编译后的CSS/Javascript文件而不是原始文件。
合并和压缩资源

一个Web页面可以包含很多CSS 和/或 JavaScript 文件,为减少HTTP 请求和这些下载文件的大小, 通常的方式是在页面中合并并压缩多个CSS/JavaScript 文件为一个或很少的几个文件,并使用压缩后的文件而不是原始文件。

补充: 合并和压缩资源通常在应用在产品上线模式,在开发模式下使用原始的CSS/JavaScript更方便调试。
接下来介绍一种合并和压缩资源文件而不需要修改已有代码的方式:

找出应用中所有你想要合并和压缩的资源包,
将这些包分成一个或几个组,注意每个包只能属于其中一个组,
合并/压缩每个组里CSS文件到一个文件,同样方式处理JavaScript文件,
为每个组定义新的资源包:
设置yii\web\AssetBundle::css 和 yii\web\AssetBundle::js 属性分别为压缩后的CSS和JavaScript文件;
自定义设置每个组内的资源包,设置资源包的yii\web\AssetBundle::css 和 yii\web\AssetBundle::js 属性为空, 并设置它们的 yii\web\AssetBundle::depends 属性为每个组新创建的资源包。
使用这种方式,当在视图中注册资源包时,会自动触发原始包所属的组资源包的注册,然后,页面就会包含以合并/压缩的资源文件, 而不是原始文件。

示例

使用一个示例来解释以上这种方式:

鉴定你的应用有两个页面X 和 Y,页面X使用资源包A,B和C,页面Y使用资源包B,C和D。

有两种方式划分这些资源包,一种使用一个组包含所有资源包,另一种是将(A,B,C)放在组X,(B,C,C)放在组Y, 哪种方式更好?第一种方式优点是两个页面使用相同的已合并CSS和JavaScript文件使HTTP缓存更高效,另一方面,由于单个组包含所有文件, 已合并的CSS和Javascipt文件会更大,因此会增加文件传输时间,在这个示例中,我们使用第一种方式,也就是用一个组包含所有包。

补充: 将资源包分组并不是无价值的,通常要求分析现实中不同页面各种资源的数据量,开始时为简便使用一个组。
在所有包中使用工具(例如 Closure Compiler, YUI Compressor) 来合并和压缩CSS和JavaScript文件, 注意合并后的文件满足包间的先后依赖关系,例如,如果包A依赖B,B依赖C和D,那么资源文件列表以C和D开始,然后为B最后为A。

合并和压缩之后,会得到一个CSS文件和一个JavaScript文件,假定它们的名称为all-xyz.css 和 all-xyz.js, xyz 为使文件名唯一以避免HTTP缓存问题的时间戳或哈希值。

现在到最后一步了,在应用配置中配置yii\web\AssetManager 资源管理器如下所示:

return [ 'components' => [ 'assetManager' => [ 'bundles' => [ 'all' => [ 'class' => 'yii\web\AssetBundle', 'basePath' => '@webroot/assets', 'baseUrl' => '@web/assets', 'css' => ['all-xyz.css'], 'js' => ['all-xyz.js'], ], 'A' => ['css' => [], 'js' => [], 'depends' => ['all']], 'B' => ['css' => [], 'js' => [], 'depends' => ['all']], 'C' => ['css' => [], 'js' => [], 'depends' => ['all']], 'D' => ['css' => [], 'js' => [], 'depends' => ['all']], ], ], ], ];

如自定义资源包 小节中所述,如上配置改变每个包的默认行为, 特别是包A、B、C和D不再包含任何资源文件,都依赖包含合并后的all-xyz.css 和 all-xyz.js文件的包all, 因此,对于页面X会包含这两个合并后的文件而不是包A、B、C的原始文件,对于页面Y也是如此。

最后有个方法更好地处理上述方式,除了直接修改应用配置文件,可将自定义包数组放到一个文件,在应用配置中根据条件包含该文件,例如:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/6f5472fdfac644bab6645b0284f2d5de.html