We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
2017.03.24 发布,最后更新于 2017.03.28 PC Web端 题库项目 v3.1.0 于 2017.03.23(周四)成功上线,这个版本我们对静态资源文件做了压缩处理及版本修订,在各位同事的共同努力下成功将静态资源处理部署至服务器并纳入版本发布自动化流程。 这篇博文旨在结合前端自动化构建领域知识对本次静态资源处理工作做知识分享并复盘本版本上线该功能遇到的问题。
2017.03.24 发布,最后更新于 2017.03.28
PC Web端 题库项目 v3.1.0 于 2017.03.23(周四)成功上线,这个版本我们对静态资源文件做了压缩处理及版本修订,在各位同事的共同努力下成功将静态资源处理部署至服务器并纳入版本发布自动化流程。
静态资源处理
这篇博文旨在结合前端自动化构建领域知识对本次静态资源处理工作做知识分享并复盘本版本上线该功能遇到的问题。
前端自动化构建
为了构建高性能 Web,我们通常会考虑到以下2个优化方向:
同时,我们项目中还存在以下2个问题:
而以上问题都可以通过在开发编码阶段后进行静态资源文件处理去解决。
至于自动化很好理解,为了提高生产力,可以解放劳动力嘛 😊
<style></style>
<script></script>
具体参考
chapter.js
chapter-dbfaeb5f77.js
rev-manifest.json
两种方式都可以达到防止浏览器缓存:
a.js
a.js?v=20170323
a-dbfaeb5f77.js
query 方式的问题:
hash 方式的优势:
$STATIC_URL/exam/**/*
/exam/**/*
<link>
>
<
>
<
那么问题来了,版本上线,如何在线上环境下的浏览器中调试已经压缩了的代码?
--> Chrome 和 FireFox 浏览器调试工具自带的 Pretty print 工具
Pretty print
那,如何格式化已经混淆了的 JS 呢?
--> Source Map 技术
很早之前处理各种情景的工具已经出现了,我们需要把能处理各种任务的工具集成起来,实现可配置、可自动按需执行。对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting 等,自动化工具可以减轻你的劳动,简化你的工作
grunt 与 gulp:
Node.js 中,在使用 readFile 方法或 readFileSync 方法读取文件内容或者使用 writeFile 方法或 writeFileSync 方法写入文件内容时,Node.js 将该文件内容视为一个整体,为其分配缓存区并且一次性从缓存区操作文件内容,在这个期间,Node.js 将不能执行任何其他处理。
readFile
readFileSync
writeFile
writeFileSync
在很多场合下,我们并不关心整个文件的内容,而只关注是否从文件中读取到了某些数据,以及在读取到这些数据时所需要执行的处理。这时,我们可以使用 Node.js 中的文件流来执行这一处理。
-- 《Node.js 权威指南》
The text was updated successfully, but these errors were encountered:
No branches or pull requests
(一)为什么要做自动化静态资源处理?
为了构建高性能 Web,我们通常会考虑到以下2个优化方向:
同时,我们项目中还存在以下2个问题:
而以上问题都可以通过在开发编码阶段后进行静态资源文件处理去解决。
至于自动化很好理解,为了提高生产力,可以解放劳动力嘛 😊
(二)我们做了哪些静态资源处理?
压缩 HTML 文件
<style></style>
中的 CSS 代码<script></script>
中的 js 代码压缩 CSS 文件
压缩、混淆 JS 文件
具体参考
压缩图片
版本修订
chapter.js
->chapter-dbfaeb5f77.js
,并输出rev-manifest.json
文件用来指示文件命名修改前后的路径及文件名变化rev-manifest.json
,并对模板文件中(.html, .vm, .jsp)对资源的引用 url 同样添加对应的哈希值(三)query 方式还是 hash 方式?
两种方式都可以达到防止浏览器缓存:
a.js
->a.js?v=20170323
a.js
->a-dbfaeb5f77.js
query 方式的问题:
hash 方式的优势:
(四)部署实施中遇到的问题
$STATIC_URL/exam/**/*
或/exam/**/*
的形式。目前解决措施是通过脚本匹配替换相对路径为相应的绝对路径<link>
标签的方式添加对其 CSS 的引用,并动态添加 query。(当时和晓东发现这个的时候也是很无语的... 😢)。对于这种个别情况,文件处理是搞不定的,只能手动排除加入构建黑名单中了...>
<
而不是>
<
(五)我们还使用了 Source Map 技术
那么问题来了,版本上线,如何在线上环境下的浏览器中调试已经压缩了的代码?
--> Chrome 和 FireFox 浏览器调试工具自带的
Pretty print
工具那,如何格式化已经混淆了的 JS 呢?
--> Source Map 技术
(六)为什么需要前端自动化构建工具?
很早之前处理各种情景的工具已经出现了,我们需要把能处理各种任务的工具集成起来,实现可配置、可自动按需执行。对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting 等,自动化工具可以减轻你的劳动,简化你的工作
grunt 与 gulp:
(七)除了处理静态资源,自动化构建还可以做什么?
The text was updated successfully, but these errors were encountered: