`
dcj3sjt126com
  • 浏览: 1877804 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

对网站中的js,css文件进行打包

阅读更多

一,为什么要用smarty进行打包

apache中也有给js,css这样的静态文件进行打包压缩的模块,但是本文所说的不是以这种方式进行的打包,而是和smarty结合的方式来把网站中的js,css文件进行打包。

为什么要进行打包呢,主要目的是为了合理的管理自己的代码 。现在有好多网站,你查看一下网站的源码的话,你会发现网站的头部有大量的JS文件和CSS文件,网站的尾部也有可能有大量的JS文件。以webqq为例吧:

 

<script type="text/javascript" src="js/util.js?20100429001"></script>
<script type="text/javascript" src="js/webeditor.js?20100429001"></script>
<script type="text/javascript" src="js/helptip.js?20100429001"></script>
<script type="text/javascript" src="js/window.js?20100429001"></script>
<script type="text/javascript" src="js/main-panel.js?20100611001"></script>
<!-- this script is for flashplayer version detection -->
<script type="text/javascript" src="js/fp_detect.js"></script>
<!--script type="text/javascript" src="js/tab-msgbox.js?20090311"></script-->
<script type="text/javascript" src="js/tab-buddystate.js?20090927001"></script>
<!--script type="text/javascript" src="js/tab-buddyimpression.js?20090311"></script-->
<script type="text/javascript" src="js/tab-addbuddy.js?20091210001"></script>
<script type="text/javascript" src="js/main.js?20100611001"></script>
<script language="javascript" src="http://pingjs.qq.com/ping.js"></script>

 上面的代码是放在webqq的底部,看着很不爽,如果只显示一个话,看着是不是很舒服呢?结果是肯定的。

 

二,用一个JS文件来包涵多个JS文件

1,用function

 

function include(filename) {
 document.write("<script language='JavaScript' type='text/javascript' src='" + filename + "'></script>");
}

include("js/jquery-1.3.2.js");
include("js/test.js");

 

 2,用数组

 

var jsarray = new Array();
jsarray[0] = "js/jquery-1.3.2.js";
jsarray[1] = "js/test.js";
for(i=0;i<jsarray.length;i++){
 document.write("<script type='text/javascript' src='"+jsarray[i]+"'></script>");
}

  三,模板文件

 

{foreach from=$jsArr item=js}
<script src="{$js}" type="text/javascript"></script>
{/foreach}

 四,调用模板的php文件

 

public function addCss($css) {
 if (!is_array($css)) {
 $this->tpl->append('cssArr', $css);
 } else {
 $this->tpl->append('cssArr', $css, true);
 }
 }

 public function addJs($js) {
 if (!is_array($js)) {
 $this->tpl->append('jsArr', $js);
 } else {
 $this->tpl->append('jsArr', $js, true);
 }
 }
$this->addJs("./js/test.pkg.js"); 

 五,总结

这样做的好处是什么呢,个人分析了以下二点:

1,把一个页面包涵的js,css文件转变成一个,代码简单

2,把这些js,css放到一个js文件里面,便于管理,如果我想加一个js,减一个js很方便,你就不用在去改模板了,如果模板多的话,你都要一个页面,一个页面去改的话,很烦人的。

如果用的不是smarty模板的话也是一样,都可以拿出来的,如果没用模板的话也是可以的,在这里只是表达一种思想。

 

分享到:
评论

相关推荐

    纯html+javascript+css webpack打包的项目

    在现代Web开发中,为了提高开发效率和优化网站性能,开发者经常使用Webpack这一强大的模块打包工具。本项目以HTML、JavaScript和CSS为基础,结合Webpack进行资源的管理和打包,使得项目结构清晰,易于理解和维护。...

    java swing补丁工具,打包class文件,jsp,html,js,css,xml,jar等文件,同时也支持其他格式的文件打包

    分享自己做的的打包工具,希望能帮助到平时为一堆补丁文件class(自动包含class内部类),jsp,html,js,css,xml,jar等文件花费很长时间整理的朋友,有了我这个工具,似乎这一切都变得简单,你只需要选择路径,然后在...

    nginx 部署 vue 项目找不到js css文件的解决方法

    综上所述,解决nginx部署Vue项目时找不到js和css文件的问题,关键在于正确设置Webpack打包时资源引用的基础路径。对于vue-cli@3,你需要在vue.config.js中配置baseUrl;而对于vue-cli@2,则需要修改config/index.js...

    maven打包使用yui压缩css和js文件

    在现代Web开发中,优化网页性能是至关重要的,其中一项策略就是对CSS和JavaScript文件进行压缩,以减少页面加载时间。Maven作为一个强大的Java项目管理工具,提供了与各种构建优化工具集成的能力,其中包括使用YUI ...

    js css文件合并工具

    JavaScript和CSS文件的合并是前端性能优化的一个常见策略,被称为"文件合并"或"资源打包"。当浏览器加载一个页面时,每个外部资源(如js或css文件)都需要一个单独的HTTP请求,这会增加整体的加载时间。如果一个页面...

    使用脚本+yuicompressor对js,css文件打包.pdf

    标题和描述中提到的技术点主要围绕如何使用批处理脚本结合yuicompressor工具来压缩和打包JavaScript(js)以及CSS文件。yuicompressor是一款高效的压缩工具,能够去除文件中的空格、换行和注释,从而减小文件体积,...

    扒网站界面神器(一键下载:html,css,js,img等文件)

    扒网站界面神器(一键下载:html,css,js,img等文件)扒网站界面神器(一键下载:html,css,js,img等文件)扒网站界面神器(一键下载:html,css,js,img等文件)扒网站界面神器(一键下载:html,css,js,img等文件)扒网站界面...

    CSS,JS文件压缩器,淘宝打包

    为了提升网站的响应速度,减小CSS和JavaScript文件的体积至关重要。为此,开发人员和前端工程师常常需要借助各种文件压缩工具来优化他们的代码。本文将详细介绍一款高效便捷的文件压缩工具——“CSS,JS文件压缩器,...

    dojo/js/css 压缩打包工具 - 桌面版

    该工具可按指定的方案合并、压缩dojo或符合dojo规范的js文件、压缩css文件。 使用方便,无需安装配置, 下载置入dojo源码下的任意目录即可一键完成打包压缩. 该工具可自动分析HTML文件生成打包方案,自动排除没有用到的...

    Gzip工具打包JS、CSS文件,后台解压缩

    在现代Web开发中,为了提高页面加载速度,减少网络传输的数据量,开发者通常会使用Gzip工具对JavaScript和CSS文件进行压缩。Gzip是一种广泛使用的数据压缩格式,它能够有效地减小文件大小,从而加快了文件在网络上的...

    YUI JS CSS 打包工具

    YUI JS CSS 打包工具是一款高效的前端资源优化工具,主要针对JavaScript (JS) 和 Cascading Style Sheets (CSS) 文件进行压缩和合并,以提升网页加载速度和整体性能。这款工具由雅虎(Yahoo!)开发,是其开源项目的...

    sweetalear2弹窗插件 官方原码和打包文件js,css打包文件

    1. **dist目录**:这是预编译后的打包文件存放处,包含了CSS样式表(`sweetalert2.css`)和JavaScript库(`sweetalert2.all.min.js`)。这两个文件是直接用于开发的,可以引入到HTML页面中。 2. **src目录**:包含了...

    element ui 离线压缩版 js css 含图标

    2. **离线使用**:压缩包中的离线版本是为了那些不希望或者无法使用 webpack 进行前端打包的项目准备的。Webpack 是一种模块打包工具,通常用于处理 JavaScript、CSS 和其他静态资源,但有些情况下,如本地快速原型...

    pdf.js打包文件

    至于`generic`目录,这应该是打包后的结果,包含了所有必要的JavaScript和CSS文件,以及可能的字体或图片资源。这些文件可以被引入到HTML中,直接用于在线展示PDF文档。例如,`generic/build/pdf.js`和`generic/...

    css/js文件模块化组件

    此外,对于CSS和JavaScript的组合,我们可以利用Webpack的CSS Loader和Style Loader,将CSS模块直接内联到HTML中,或打包到单独的CSS文件中,这取决于优化策略。这种方式称为"CSS in JS",它允许我们在JavaScript中...

    详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)

    在使用webpack进行前端项目构建时,经常会有需要将特定的CSS或JS文件排除在主打包流程之外,或者单独对某个文件进行打包的需求。这样做可以方便后期对这些文件进行修改和维护,而不影响到其他已经打包好的资源文件。...

    使用Webpack对JS文件进行打包构建并在配置文件中指定打包路径

    在一个Web项目中 会引入很多文件 例如css文件 js文件 字体文件 图片文件 模板文件 等 引入过多文件将导致网页加载速度变慢 而Webpack则可以解决各个包之间错综复杂的依赖关系 Webpack是前端的一个项目构建工具 基于...

    webpackdemo只打包js、css

    在这个简单的Webpack示例中,`src`目录下的`index.js`可能是入口文件,它可能引用了CSS文件或其他JavaScript模块。`style-loader`和`css-loader`会处理CSS文件,而`babel-loader`则负责将ES6+代码转化为浏览器可理解...

    element ui 2.15.14 打包后结果 在页面上引入 js 和 css 文件即可开始使用

    element ui 2.15.14 打包后结果 在页面上引入 js 和 css 文件即可开始使用

Global site tag (gtag.js) - Google Analytics