之前我们写的商城,我们把所有的前端模块通通放在了web的assets目录下,加载资源的时候回加载所有资源。无疑这样网页加载速度会大大减慢
相关概念
资源
我们页面所需要的css,js,图片,或者视频等等
资源包
在渲染页面时,可以将所需要的资源假如资源包,在页面中注册该资源包即可渲染对应的资源
定义资源包
<?php
namespace backend\assets;
use yii\web\AssetBundle;
/**
* Main backend application asset bundle.
*/
class AppAsset extends AssetBundle
{
public $basePath = '@webroot';
public $baseUrl = '@web';
public $css = [
'css/site.css',
];
public $js = [
];
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
];
}
这里就是我们的yii高级模板中自定义的一个资源包。
我们可以看到,我们的AppAsset
继承自我们的AssetBundle
类
我们来看一看AssetBundle
中有什么属性
@设置我们的资源目录的路径,当我们资源位于服务器目录外时设置此属性,如不设置该属性则表示资源路径位于basePath下
$sourcePath
@设置我们WEB可以访问的资源路径,如果设置了sourcePath,该属性将会被覆盖
$basePath
@web访问资源文件的URL地址
$baseUrl
@设置我们加载资源所依赖的资源包(如boostarp依赖jquery)
$depends[]
@js文件
$js[]
@css文件
$css[]
@加载时所用到的选项
$jsOptions[]
$cssOptions[]
@指定我们sourcePath下的发布文件
$publishOptions[]
使用资源包
我们介绍了之后再来看一看,刚才的例子代码
<?php
namespace backend\assets;
use yii\web\AssetBundle;
class AppAsset extends AssetBundle
{
public $basePath = '@webroot'; //定义了我们资源路径为,@webroot即当前web服务器路径
public $baseUrl = '@web';//设定我们的url为当前url
public $css = [
'css/site.css',//添加了basePath/css/site.css文件
];
public $js = [//js文件为空
];
public $depends = [//指定我们上面的css,js所依赖的资源包
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
];
}
在这写了之后我们在view视图里面调用它。
<?php
use backend/assets/AppAsset;
AppAssets::register($this);//给该视图注册资源包
?>
<?php $this->beginPage()?>
<html>
...
...
<?php $this->head();?>//输出我们的资源
....
....
<body>
<?php $this->beginBody();?>
...
...
<?php $this->endBody();?>
</body>
...
...
</html>
<?php $this->endPage()?>
?>
这样就初步实现了我们的前端资源发布