我试图通过整合和压缩CSS和JS文件来优化网站性能.我的问题更多地是关于如何实现这一点的(具体)步骤,考虑到我所面临的实际情况(但在其他开发人员中也应该是典型的).

我的页面引用了几个CSS和JS文件,如下所示:

<!--
  It's easier to work on smaller files during development.
  Hence, the multiple CSS and JS files.
-->
<link type="text/css" rel="stylesheet" href="/css/main.css" />
<link type="text/css" rel="stylesheet" href="/css/secondary-1.css" />
<link type="text/css" rel="stylesheet" href="/css/secondary-2.css" />

<script type="text/javascript" src="/scripts/js/main.js"></script>
<script type="text/javascript" src="/scripts/js/adapter/adapter.js"></script>
<script type="text/javascript" src="/scripts/js/adapter/title-adapter.js"></script>

对于生产版本,我想将3个CSS文件合并为一个,并使用例如YUI Compressor将其缩小.但是,我需要更新所有需要这3个文件的页面以引用新缩小的CSS.这似乎很容易出错(例如,您要在许多文件中删除和添加一些行).有没有其他风险较低的方法?JS文件也存在同样的问题.

推荐答案

我最终使用CodeKit来连接我的CSS和JS文件.我发现真正有用的特性是在保存文件时进行连接的能力;因为它监视各自的CSS/JSassets资源 .一旦我将它们正确地组合在一起,例如,将它们组合成1个CSS和1个JS文件,所有其他文件就可以简单地引用这2个文件.

你甚至可以要求codekit在飞翔上进行缩小/压缩.

免责声明:我与CodeKit没有任何关联.我在网上随机找到了它,它在我的开发过程中成为了一个很好的工具.自从我一年多前第一次使用它以来,它也有很好的更新.

Css相关问答推荐

如何在CSS中使用nextJs来指定基色?

如何居中对齐容器父对象?

在NextJS/Reaction应用程序中显示更新问题

VueJS3+Vutify中缺少一些CSS类

在GRID-TEMPLATE-ROWS中设置最大行数:Repeat()

如何更改Swiper Navegation默认 colored颜色

如何为图像堆叠效果下方的图层实现与磨砂玻璃类似的视觉效果

如何在Bootstrap 5上使用移动设备居中内容?

如何有条件地设置元素的字体大小,只有在未明确设置父字体大小(即字体大小为继承)的情况下?

如何使代码块输出在 quarto revealjs 演示文稿中水平滚动

Tailwind CSS 隐藏和可见

问题定位位置:Tailwindcss 中的绝对元素

如何在 CSS 中更改 ::marker SVG colored颜色 ?

Flexbox 子高度它的内容

CSS3 - RotateY() 居中

flex-start 和基线有什么区别?

使用 Twitter Bootstrap 使页脚粘在页面底部

输入和文本字段中的背景 colored颜色

:before 和 ::before 有什么区别?

仅当存在 2 个类时,您可以使用 CSS 定位元素吗?