Twitter Bootstrap 101：整理文件大小

最新推荐文章于 2025-12-22 15:57:21 发布

翻译最新推荐文章于 2025-12-22 15:57:21 发布 · 167 阅读

文章标签：

#java #计算机视觉 #深度学习 #js #javascript #ViewUI

对诸如Twitter Bootstrap之类的框架的普遍批评之一是，它们所包含的代码远远超过您在站点中实际使用的代码，从而使您的代码库过大且网站性能不佳。这是可能的危险，但是Bootstrap的Customize页面提供了一个很好的工具来解决该问题。让我引导您完成自定义CSS和JavaScript文件以大大减小其文件大小的过程。

这将处理第一个视频，在第二个视频中，我将引导您完成另一个重要的步骤：使用Yahoo!的Smushit工具从图像文件中压缩位。这两个步骤（优化您的代码和优化您的图像）在一起，将大大减少您网站的占地面积。

步骤1：修剪CSS和JavaScript

我们将使用Twitter的引导的自定义页面选择和只下载CSS和JavaScript组件我们需要的，从而导致更小的文件大小。

或者，下载视频，或通过iTunes或YouTube订阅Webdesigntuts +屏幕录像！

截图：CSS和JS组件

以下是我在截屏视频中所做选择的屏幕截图。

是否要进一步优化？

下载并部署了自定义CSS和JS文件后，您可以选择使用Dust Me Selectors之类的插件来识别其余未使用的选择器，从而进一步获益，您可以手动从CSS文件中进行编辑。这将是与较小的自定义文件比原文件要容易得多。

第2步：涂抹您的图像文件

在优化文件时，我们可能还会提到一个额外的步骤，该步骤将帮助您处理普通站点中最大的文件：图像文件。在为网络优化图像时，有很多考虑事项。您可能会惊讶于并非所有的压缩工具都一样。事实证明，Photoshop中的“为网络和设备保存”对话框是其中最无效的压缩工具之一。

在这里，我们将使用Yahoo!的Smushit工具来帮助我们完成Photoshop无法完成的工作。

或者，下载视频，或通过iTunes或YouTube订阅Webdesigntuts +屏幕录像！

进一步阅读

翻译自: https://webdesign.tutsplus.com/articles/twitter-bootstrap-101-trimming-file-size--webdesign-7532