Comments (10)
我重新分析了下,可以确定两点:
- 在压缩主题中的模板时花费了大量的时间,多次的压缩。
- 模板中,有些是重复的相同压缩,有些是因为页面变量的原因,内容不同。
内容不同的无法处理,因为确实是不同,所以就想办法让内容相同的,从多次压缩改成一次压缩,将压缩后的内容存储起来,下次遇见直接调用。所以这里的判断我是分两部分:1.判断当前被压缩的文件是否是模板文件,2.判断压缩的内容是否相同(这里是直接简单的判断了内容的长度),大致的代码如下:
var html_map = new Map(); // 全局变量
function logic_html(str, data) {
//...
var path = data.path == null ? "no_path_value.ejs" : data.path;
var exclude = options.exclude;
var tempMap; // 临时变量
var checkFlag = minimatch(path, "**/*.ejs"); // 模板文件
if(checkFlag){ // 模板内容
if(html_map.has(path)){ // 如果存在相同路径
tempMap = new Map(html_map.get(path)); // 取值
if(tempMap.has(str.length)) // 判断是相同的长度
return tempMap.get(str.length); // 直接返回值
} else tempMap = new Map();
}
//...
var log = hexo.log || console.log;
var result = Htmlminifier(str, options);
if(checkFlag){ // 只记录模板文件的内容
tempMap.set(str.length,result); // 存储压缩后的内容
html_map.set(path,tempMap); // 存放到全局变量中
}
var saved = ((str.length - result.length) / str.length * 100).toFixed(2);
log.log('neat the html: %s [ %s saved]', path, saved + '%');
return result;
};
这里,我只开启了 html 文件的压缩(js
、css
可以用 jsdelivr 的 CDN),修改前生成用时:15s
修改后,生成用时:5.93s
,效果显著,啊哈哈。
好了,这次才算是完全修改,完结撒花~
from hexo-neat.
还有一个html首尾注释时间戳的问题,发布后会导致所有页面缓存失效。
from hexo-neat.
一个比较土的解决方法:将_config.yml中的neat_enable设为false,然后将其复制一份(例如neat.yml),在neat.yml中将neat_enable设为true。
这样在平时hexo g
的时候不会压缩保证效率,在需要部署的时候可以用hexo g --config neat.yml
。
缺点是要保持两个配置文件同步,可以用脚本实现。
from hexo-neat.
(如果不执行hexo clean的话)好像原版的hexo g是只处理有变化的文件,但是添加插件后好像全部都处理,然后就导致速度慢,有没有办法改善啊?
from hexo-neat.
@inkss 你好,能请教下你,具体是改哪个文件吗?
我的重复压缩模板文件,(大概100+博客)好像耗时半个小时以上了。
from hexo-neat.
今天抽空看了下这个问题。先说结论:这里其实是有两个问题:一是重复渲染,二是重复生成。重复渲染是hexo
设计缺陷,重新生成是本插件画蛇添足。而这两者导致变慢的罪魁祸首是重复渲染。
问题分析记录
从名字上来看,本插件注册的filter
为after_render:html
,即为渲染后执行的意思。为什么一篇文章会被重复渲染呢?本文记录调试分析。
一,旧的检测检测资源是否被修改的方式
https://github.com/hexojs/hexo/blob/850ffbcb157c51268b0a4b9c88bd46cca56bbcc2/lib/plugins/console/generate.js#L41
插件只有在下面的 writeFile
函数里才会被调用,按道理说,这里假如不传递force
,并且文件已经存在,并且文件没有被修改,就一定不会传递给插件,自然就没有后续问题了。
但实情是isModfied
永远为true
,除非将文件类型设置为skip
。因此,所有文章就必定会经过渲染,无论使用本插件与否。
二,生成文章与否的判断
上面有同学也提到了,假如不实用本插件的话,就没有问题。其实这个话是不严谨的,无论使用与否,都存在问题,只是本插件放大了此问题。(hexo原有体系在渲染时不会输出,所以用户无法感知。本插件在文章比较多时,压缩会比较慢。)
但无论如何,不使用本插件时,hexo不会重新生成文件。 这个结论是正确的,但是为什么会这样呢?继续往下分析
https://github.com/hexojs/hexo/blob/850ffbcb157c51268b0a4b9c88bd46cca56bbcc2/lib/plugins/console/generate.js#L76
这里可以清楚的看到,hexo使用hash对生成后的文件进行了hash校验,假如他们一致则不重新生成。
至此,问题已经一目了然了。那就是hexo在设计时并未考虑到插件可能会修改渲染后的内容,导致此处判断形同虚设。一个完整的流程是
hexo g -> 这里有缺陷,导致无条件渲染->hexo渲染后交由插件渲染->插件渲染后交由hexo生成->hexo判断渲染后的结果,发现与缓存的不一致->重新生成
而正常的流程是
hexo g -> 这里有缺陷,导致无条件渲染->hexo渲染后交由hexo生成->hexo判断渲染后的结果,发现与缓存一致->不重新生成
这里要想和保持和hexo的结果一致,就需要保证插件每次渲染后的结果要一致,而显然可能是结果不一致的。经过分析,最终发
https://github.com/rozbo/hexo-neat/blob/5819ebed6fc2a1104675b5c488aa3e56ed8779c6/lib/filter.js#L32
此处导致的每次生成的最终文件不一致,导致每次需要重新生成,去掉即可解决每次重新生成的问题。
至于重复渲染,hexo并未提供相应的接口或者方式能解决此问题,我将尝试自行造轮子解决。
from hexo-neat.
没用的,hexo clean 后就全没了,我上面的观点也有不对的地方,主要是 不同页面间有可能传递参数(无法判断同一路径下的相同模板文件是否相同(接收参数的部分)
from hexo-neat.
除非是改变监听方式,对渲染完成后的完整的 html 文件执行压缩
from hexo-neat.
除非是改变监听方式,对渲染完成后的完整的 html 文件执行压缩
现在就是监听的渲染完成,但问题是hexo本身是无差别渲染的。
from hexo-neat.
为了解决这个问题,我又新造了一个轮子
https://github.com/rozbo/hexo-cute,
相关问题可以在那里讨论。
from hexo-neat.
Related Issues (20)
- ERROR Asset render failed: lib/three/gulpfile.js HOT 4
- neat_js压缩JS会导致部分网页效果失效 HOT 4
- exclude: '*.min.js' can not work HOT 2
- Can not install the latest version(1.0.5) by npm
- won't minify MathJax.js scripts HOT 1
- 在渲染时遇到左尖括号会报错 HOT 5
- Error minifying ES6 js code HOT 1
- The neat plugin failed to render HTML with the Pug theme in Butterfly when rendering articles with pictures HOT 2
- Wrong version specified for clean-css HOT 1
- 可否添加一个选项,仅删除空行 HOT 2
- d:path("")压缩会被删除 HOT 1
- 这个支持@import吗? HOT 1
- 怎样排除 “/tags/标签/”页面的HTML文件压缩?
- 关于性能问题
- null
- Bug: 由于uglify-js v3.10.x 的minify函数对传入的参数对象进行强校验,neat_js无法工作。
- 没有效果?
- 仓库 readme 的致谢部分是不是除了一点问题 HOT 2
- BUG:插件压缩时会把选择器中一些不该被压缩的空格压缩 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hexo-neat.