2

我有一个带有 JS (jQuery) 和 CSS 的 HTML 文件。我想要一个转换器，它可以转换所有文件，将其最小化，然后将其全部放在 index.html 中。谷歌似乎正在使用它，他们没有外部文件，甚至没有图像，一切都在一个文件中，我确信在发布之前已经预编译。

这也是个好主意吗？

4

4 回答 4

2

This is not a good idea, in general.

Splitting out your CSS and JavaScript files means that they can be cached independently. You will likely be using a common CSS and JavaScript across many pages. If you don't allow those to be cached, and instead store them in each page, then the user is effectively downloading a new copy of those files for every page they visit.

Now, it is a good idea to served minified versions of these files. Also make sure to add gzip or deflate transfer encoding so that they are compressed. Text compresses nicely... usually around a ratio of 1/8.

(I should note that there has been one occasion where I have loaded everything into a single file. I was working on a single-page web application for the Nintendo Wii, which had no caching capability at all. This is about the only instance where putting everything into a single file made sense. Even then, it is only worth the effort if you automate it server-side.)

于 2013-01-26T18:11:55.560 回答
1

I don't recommend to concat CSS with JS. Just put your css at the top of the page and js at the bottom.

To minify your CSS and JS you have to use gruntjs

Also I recommend you to read this article: Front-end performance for web designers and front-end developers

于 2013-01-26T18:11:53.957 回答
1

If your intention is to load the pages faster:

  1. For images: try to use image sprites or images from different domains because browsers love downloading resources from different domains instead of just one domain.

  2. For scripts as well as css: use online minifiers that can reduce white-spaces and reduce the size (if you are on a web hosting, your host may be already compressing the scripts for you using gzip etc)

  3. For landing pages like index pages: If you have less styles then try inserting them inside the <style></style> tag, this will make the page load very fast, Facebook mobile does it that way.

于 2013-01-26T18:15:53.590 回答
-1

如果这不是一个好主意，谷歌就不会使用它！

如果您将所有内容都放在一个文件中，那么当浏览器检查是否有新版本的文件可用时，您会收到更少的 HTTP 请求。

您还会看到一些资源没有刷新的问题，这对于“普通”开发人员来说是个令人头疼的问题，但在 AJAX 应用程序中却是一场灾难。

我不知道有任何公开可用的工具可以做到这一切，谷歌肯定有自己的。另请注意，例如在 GWT 中，许多此类嵌入是由编译器完成的。

你可以做的是搜索：

CSS 图像嵌入器- 用于将图像编码为 CSS

CSS 和 JS 缩小器- 用于构建单个 CSS/JS 并将其最小化

而且您需要一些简单的工具将其嵌入到 HTML 中。

于 2013-01-26T18:16:47.453 回答