这可能是我的错误,但无论如何,我正在使用 fat free 框架,它有一个内置函数来将多个 css/js 缩小到一个文件中,我认为这有利于优化,但结果恰恰相反. 如果我将 js 文件分开保存(并且它们位于我的 html 的末尾),则添加的总大小约为 364kb,并且似乎在 1.5 秒内并行加载。但是,如果我尝试加载组合版本,单个文件大小将变为 343kb 左右,但加载大约需要 10 秒。
我的缩小逻辑有点不同。首先在模板中我调用一个函数来加载文件:
<script type="text/javascript" src="{{ @BM->minify('js','js/',array(
'vendor/jQui/jquery-ui-1.10.4.custom.min.js',
'vendor/datatables/jquery.dataTables.min.js',
'vendor/bootstrap.min.js',
'vendor/smartmenus-0.9.5/jquery.smartmenus.min.js',
'vendor/smartmenus-0.9.5/addons/bootstrap/jquery.smartmenus.bootstrap.min.js',
'vendor/smartmenus-0.9.5/addons/keyboard/jquery.smartmenus.keyboard.min.js',
'plugins.js',
'main.js'
)) }}"></script>
该函数设置适当的会话变量并返回路径。
public function minify($type='',$folderpath='css/',$files=array()){
$filepaths = implode(",",$files);
$this->f3->set('SESSION.UI_'.$type,$this->themeRelFolder().'/'.$folderpath);
$this->f3->set('SESSION.ReplaceThemePath_'.$type,$this->themeRelFolder());
$this->f3->set('SESSION.m_'.$type,$filepaths);
return($this->f3->get('BASE').'/minify/'.$type);
}
该路径映射到一个控制器,该控制器调用 minify 方法并吐出实际的缩小内容。
public function index($f3, $params) {
$f3->set('UI',$f3->get('SESSION.UI_'.$params['type']));
if($params['type']=='css'){
echo str_replace("<<themePath>>","../".$f3->get('SESSION.ReplaceThemePath_'.$params['type'])."/",\Web::instance()->minify($f3->get('SESSION.m_'.$params['type'])));
}else
{
echo \Web::instance()->minify($f3->get('SESSION.m_'.$params['type']));
}
}
我这样做是为了缩小模板所需的文件数量,并且无论主题内的文件夹嵌套结构如何,都能够维护文件路径。
我究竟做错了什么?
PS:我在我的本地 wamp 设置上测试这个,而不是实际的服务器,所以加载时间明显不同于实际的 Web 服务器。