什么时候我应该合并我的JS和CSS文件

When Should I Combine my JS and CSS Files?

本文关键字：CSS 文件 JS 我的 我应该 合并 什么时候      更新时间：2023-09-26

我在这里浏览了许多关于如何以及为什么应该将JS/CSS文件结合起来以提高性能的文章，但是这些文章都没有提供任何关于何时使用的真正指导。

我正在开发一个单页微型网站，它使用7个Javascript文件(来自cdn的第三方插件和我自己的文件的混合)和8个不同的CSS文件(基本上每个插件一个，我自己编译的SASS文件)。

网站加载缓慢，即使在内部网在这里;我担心外面的表演。在昨天搜索几个插件时，我发现了几篇CodePen和插件文章，基本上说的是"酷孩子连接JS"(字面意思)，这让我思考了整个事情。

在什么时候我应该开始连接和缩小我的Javascript/CSS?

我是否应该将CDN脚本粘贴到我自己的JS文件中，或者从长远来看，有另一个HTTP请求但使用静态服务的插件文件更好?

编辑:只是为了澄清-我不是要求工具/技术，但想知道什么时候组合和缩小文件变得重要-它应该总是做@RobG建议?

您应该向UAT交付尽可能接近产品代码的代码，包括所有的最小化和文件组合。如果你不这样做，那么你没有做正确的UAT

老实说，这要看情况。人们常常错误地痴迷于并购……但情况并非总是如此。对merge-min的需求取决于以下几点:有时加载两个css文件比加载一个大文件更快更好?为什么?因为它们是并行加载的。那么简单。

所以不要沉迷于合并最小值。如果你的用户是回头客，那么就合并并依赖浏览器缓存。如果没有，通过不合并来优化并行负载。

并忽略简单的:'是的，你必须合并，因为这是10年前最好的，我从来没有质疑过':)

我应该什么时候合并我的JS和CSS文件?

每次完成开发时。特别是当您的代码要进行用户验收测试(UAT)时，如果不是更早的话。谢谢@RobG的提醒。

你建议用什么工具?

Browserify

让我们从JS文件开始。我认为一个捆绑各种JS文件/模块的好工具是Browserify。

浏览器没有定义require方法，但是Node.js有。使用Browserify，您可以编写使用require的代码，就像在Node中使用require一样。

下面是一个关于如何在命令行上使用Browserify来捆绑一个名为main.js的简单文件及其所有依赖项的教程:

var unique = require('uniq');
var data = [1, 2, 2, 3, 4, 5, 5, 5, 6];
console.log(unique(data));

使用npm安装uniq模块:

npm install uniq

现在用browserify命令将main.js开头的所有必需模块递归地打包到一个名为bundle.js的文件中:

browserify main.js -o bundle.js

Browserify解析AST中的require()调用，以遍历项目的整个依赖关系图。在html中添加一个标签，就完成了!

<script src="bundle.js"></script>

还有一个类似的用于CSS文件的工具叫做browserify-css。

口

gulp是一个工具包，它将帮助您在开发工作流中自动执行痛苦或耗时的任务。对于web开发(如果这是你的事情)，它可以通过CSS预处理、JS编译、最小化、实时重新加载等等来帮助你。所有主要的ide都内置了集成，人们喜欢PHP、。net、Node.js、Java等的集成。有超过1700个插件(没有插件你也可以做很多事情)，gulp可以让你停止对构建系统的干扰，回到工作中来。

公共CDN脚本

我应该将CDN脚本粘贴到我自己的JS文件中，还是从长远来看，有另一个HTTP请求但使用静态服务的插件文件更好?

您可以将它们保存在公共CDN中;为了避免不必要的服务器过载，浏览器限制了可以同时建立的连接数量。根据浏览器的不同，这个限制可能低至每个主机名两个连接。使用公共CDN(如Google AJAX Libraries CDN)消除了对站点的一次请求，允许并行下载更多本地内容。点击这里阅读更多内容

相关文章：