我什么时候应该合并我的 JS 和 CSS 文件?
When Should I Combine my JS and CSS Files?
我在这里浏览了很多关于 how and why one should combine JS/CSS files for 的文章,但是其中 none 提供了关于 什么时候 合适的时间。
我正在开发一个单页微型网站,它使用七个 Javascript 文件(来自 CDN 的第三方插件和我自己的文件的混合)和八个不同的 CSS 文件(基本上每个插件一个,我自己编译的 SASS 文件)。
即使在此处的 Intranet 上,该网站加载速度也很慢;我担心外面的表现。昨天在搜索几个插件时,我发现了几篇 CodePen 和插件文章,基本上都是说 "cool kids concatenate JS" (literally) 这让我开始思考这件事。
我应该在什么时候开始连接和缩小我的 Javascript/CSS?
我应该将 CDN 脚本粘贴到我自己的 JS 文件中,还是长 运行 有另一个 HTTP 请求但使用静态服务的插件文件更好?
编辑: 只是为了澄清 - 我不是在要求 tools/techniques,而是想知道什么时候合并和缩小文件变得很重要 - 它应该 总是按照@RobG的建议完成了吗?
You should deliver code to UAT that is as close to production code as possible, including all minification and combining of files. If you don't, then you aren't doing proper UAT
When Should I Combine my JS and CSS Files?
每次你完成开发。特别是当您的代码要进行用户验收测试 (UAT) 时,如果不是更早的话。感谢@RobG 提到它。
Which tools do you suggest?
浏览器化
让我们从您的 JS 文件开始。我认为捆绑各种 JS files/modules 的一个很好的工具是 Browserify.
浏览器没有定义 require 方法,但 Node.js 有。使用 Browserify,您可以编写使用 require 的代码,就像您在 Node 中使用它一样。
这是一个教程,介绍如何在命令行上使用 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 为 require() 调用解析 AST,以遍历项目的整个依赖关系图。
将一个标签放入您的 html 即可完成!
<script src="bundle.js"></script>
还有一个用于 CSS 文件的类似工具,名为 browserify-css。
Gulp
gulp 是一个工具包,可帮助您在开发工作流程中自动执行痛苦或耗时的任务。对于 Web 开发(如果这是你的事),它可以通过 CSS 预处理、JS 转译、缩小、实时重新加载等等来帮助你。所有主要 IDE 都内置了集成功能,人们喜欢 gulp PHP、.NET、Node.js、Java 等。拥有超过 1700 个插件(没有插件你也可以做很多事情),gulp 让你不再搞乱构建系统并重新开始工作。
Public CDN 脚本
should I paste the CDN scripts into my own JS files, or is it better in the long run to have another HTTP request but use the statically served plugin files?
您可以将它们保存在 public CDN 中;为了避免不必要的服务器过载,浏览器限制了可以同时建立的连接数。根据浏览器的不同,此限制可能低至每个主机名两个连接。
使用 public CDN(如 Google AJAX 图书馆 CDN)消除了对您网站的一次请求,允许并行下载更多本地内容。 Read more on this here
说实话,这取决于。
人们常常错误地痴迷于 merge-min ……但情况并非总是如此。是否需要 merge-min 取决于以下几点:
有时加载 2 css 个文件比加载一个大文件更快更好?为什么?因为它们会并行加载。就这么简单。
所以不要迷恋 merge-min。如果您的用户返回,每日用户,请合并并依赖浏览器缓存。如果不是,请通过不合并来优化并行负载。
并忽略简单化:“是的,你必须合并,因为那是 10 年前最好的,我从未质疑过它”:)
我在这里浏览了很多关于 how and why one should combine JS/CSS files for
我正在开发一个单页微型网站,它使用七个 Javascript 文件(来自 CDN 的第三方插件和我自己的文件的混合)和八个不同的 CSS 文件(基本上每个插件一个,我自己编译的 SASS 文件)。
即使在此处的 Intranet 上,该网站加载速度也很慢;我担心外面的表现。昨天在搜索几个插件时,我发现了几篇 CodePen 和插件文章,基本上都是说 "cool kids concatenate JS" (literally) 这让我开始思考这件事。
我应该在什么时候开始连接和缩小我的 Javascript/CSS?
我应该将 CDN 脚本粘贴到我自己的 JS 文件中,还是长 运行 有另一个 HTTP 请求但使用静态服务的插件文件更好?
编辑: 只是为了澄清 - 我不是在要求 tools/techniques,而是想知道什么时候合并和缩小文件变得很重要 - 它应该 总是按照@RobG的建议完成了吗?
You should deliver code to UAT that is as close to production code as possible, including all minification and combining of files. If you don't, then you aren't doing proper UAT
When Should I Combine my JS and CSS Files?
每次你完成开发。特别是当您的代码要进行用户验收测试 (UAT) 时,如果不是更早的话。感谢@RobG 提到它。
Which tools do you suggest?
浏览器化
让我们从您的 JS 文件开始。我认为捆绑各种 JS files/modules 的一个很好的工具是 Browserify.
浏览器没有定义 require 方法,但 Node.js 有。使用 Browserify,您可以编写使用 require 的代码,就像您在 Node 中使用它一样。
这是一个教程,介绍如何在命令行上使用 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 为 require() 调用解析 AST,以遍历项目的整个依赖关系图。 将一个标签放入您的 html 即可完成!
<script src="bundle.js"></script>
还有一个用于 CSS 文件的类似工具,名为 browserify-css。
Gulp
gulp 是一个工具包,可帮助您在开发工作流程中自动执行痛苦或耗时的任务。对于 Web 开发(如果这是你的事),它可以通过 CSS 预处理、JS 转译、缩小、实时重新加载等等来帮助你。所有主要 IDE 都内置了集成功能,人们喜欢 gulp PHP、.NET、Node.js、Java 等。拥有超过 1700 个插件(没有插件你也可以做很多事情),gulp 让你不再搞乱构建系统并重新开始工作。
Public CDN 脚本
should I paste the CDN scripts into my own JS files, or is it better in the long run to have another HTTP request but use the statically served plugin files?
您可以将它们保存在 public CDN 中;为了避免不必要的服务器过载,浏览器限制了可以同时建立的连接数。根据浏览器的不同,此限制可能低至每个主机名两个连接。 使用 public CDN(如 Google AJAX 图书馆 CDN)消除了对您网站的一次请求,允许并行下载更多本地内容。 Read more on this here
说实话,这取决于。 人们常常错误地痴迷于 merge-min ……但情况并非总是如此。是否需要 merge-min 取决于以下几点: 有时加载 2 css 个文件比加载一个大文件更快更好?为什么?因为它们会并行加载。就这么简单。
所以不要迷恋 merge-min。如果您的用户返回,每日用户,请合并并依赖浏览器缓存。如果不是,请通过不合并来优化并行负载。
并忽略简单化:“是的,你必须合并,因为那是 10 年前最好的,我从未质疑过它”:)