theme-next / hexo-filter-optimize

A Hexo plugin that optimize the pages loading speed.

hexo-filter-optimize

A hexo plugin that optimize the pages loading speed.

It will auto filter your html file, find the <link rel="stylesheet"> block and replace them into a javascript to optimize CSS delivery.

And inline the main.css into the html page like @maple3142 does.

It will improve your pages loading and get a higher score in the Google PageSpeed Insights.

Known Issues: This plugin may cause Font Awesome and PJAX to fail to load.

Installation

npm install hexo-filter-optimize

Usage

Activate the plugin in hexo's _config.yml like this:

filter_optimize:
  enable: true
  # remove the surrounding comments in each of the bundled files
  remove_comments: false
  css:
    # minify all css files
    minify: true
    # bundle loaded css files into one
    bundle: true
    # use a script block to load css elements dynamically
    delivery: true
    # make specific css content inline into the html page
    #   - only support the full path
    #   - default is ['css/main.css']
    inlines:
    excludes:
  js:
    # minify all js files
    minify: true
    # bundle loaded js files into one
    bundle: true
    excludes:
  # set the priority of this plugin,
  # lower means it will be executed first, default of Hexo is 10
  priority: 12

This plugin can be disabled by NODE_ENV in development to boost hexo generate:

export NODE_ENV=development

Comparison

Here is a result from GTmetrix to show you the changes between before and after. (Same web server located in Tokyo, Japan, vultr.com)

• Remove query strings from static resources - let all the proxies could cache resources well. (https://gtmetrix.com/remove-query-strings-from-static-resources.html)
• Make fewer HTTP requests - through combined the loaded js files into the one.
• Prefer asynchronous resources - change the css delivery method using a script block instead of link tag.
• And TODOs ...

hexo-filter-optimize's Issues

error with use minify-js

很棒！但对本地调试不太友好……

本地hexo s调试时，与没有安装前相比，反应太慢，消耗了太多的 CPU 和内存，不太友好。

能否作为一个单独功能？

比如用一个新的命令hexo optimize，这样每次 deploy 前执行一下hexo optimize即可，不会影响本地调试。

添加插件后fontawesome图标失效

这是添加插件的commit: liolok/liolok.github.io@0f2d79f

这是问题截图:

the icons are gone?

is it right?

filter_optimize:
  enable: true
  # remove static resource query string
  #   - like `?v=1.0.0`
  remove_query_string: true
  # remove the surrounding comments in each of the bundled files
  remove_comments: false
  css:
    enable: true
    # bundle loaded css file into the one
    bundle: true
    # use a script block to load css elements dynamically
    delivery: true
    # make specific css content inline into the html page
    #   - only support the full path
    #   - default is ['css/main.css']
    inlines:
    excludes:
  js:
    # bundle loaded js file into the one
    bundle: true
    excludes:

and then hexo clean && hexo g && hexo s

小图标不显示 [check hexo-filter-optimize, and CDN configs maybe]

I agree and want to create new issue

• [x ] Yes, I was on Hexo Docs page, especially on Templates, Variables, Helpers and Troubleshooting.
• [x ] Yes, I was on NexT Documentation Site.
• And yes, I already searched for current issues and this is not help to me.

---

Expected behavior

正常加载图标（home，tags等的小图标）

Actual behavior

显示为小方块

Steps to reproduce the behavior

1. 打开https://frozen-dog.github.io/可以看到效果（当然是失败的效果。。）
2. 新手一个，不懂太多技术的东西，只希望找到恢复的办法
3. 尝试删除主题文件夹/next，重新下载一个主题后使用原始配置，还是不行。
   4.浏览器F12看到类似报错：
   fontawesome-webfont.woff2 Failed to load resource: the server responded with a status of 404 (Not Found)
   fontawesome-webfont.woff Failed to load resource: the server responded with a status of 404 (Not Found)
   fontawesome-webfont.ttf Failed to load resource: the server responded with a status of 404 (Not Found)
   photos-0.jpg Failed to load resource: the server responded with a status of 409 (Conflict)

• Link to demo site with this issue: https://frozen-dog.github.io/
• Link(s) to source code or any usefull link(s): https://github.com/frozen-dog/frozen-dog.github.io.git

Node.js and NPM Information

$ node -v && npm -v
v10.8.0
6.3.0

Package dependencies Information

$ cat package.json
{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": "3.7.1"
  },
  "dependencies": {
    "hexo": "^3.2.0",
    "hexo-deployer-git": "^0.3.1",
    "hexo-filter-flowchart": "^1.0.4",
    "hexo-filter-optimize": "^0.2.5",
    "hexo-generator-archive": "^0.1.4",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-index": "^0.2.0",
    "hexo-generator-tag": "^0.2.0",
    "hexo-renderer-ejs": "^0.3.0",
    "hexo-renderer-marked": "^0.3.0",
    "hexo-renderer-stylus": "^0.3.1",
    "hexo-server": "^0.2.0"
  },
  "devDependencies": {
    "@fortawesome/fontawesome-free": "^5.2.0"
  }
}

Hexo Information

Hexo version

$ hexo  -v
hexo: 3.7.1
hexo-cli: 1.1.0
os: Windows_NT 10.0.17134 win32 x64
http_parser: 2.8.0
node: 10.8.0
v8: 6.7.288.49-node.19
uv: 1.22.0
zlib: 1.2.11
ares: 1.14.0
modules: 64
nghttp2: 1.32.0
napi: 3
openssl: 1.1.0h
icu: 62.1
unicode: 11.0
cldr: 33.1
tz: 2018e

Hexo Configuration

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: kevin的博客
subtitle:
description:
author: Kevin zhong
language: zh-CN
timezone: Asia/Shanghai

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: true
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:
  
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date
  
# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: [email protected]:frozen-dog/frozen-dog.github.io.git
  branch: master

filter_optimize:
  enable: true
  # remove static resource query string
  #   - like `?v=1.0.0`
  remove_query_string: true
  # remove the surrounding comments in each of the bundled files
  remove_comments: false
  css:
    enable: true
    # bundle loaded css file into the one
    bundle: true
    # use a script block to load css elements dynamically
    delivery: true
    # make specific css content inline into the html page
    #   - only support the full path
    #   - default is ['css/main.css']
    inlines:
    excludes:
  js:
    # bundle loaded js file into the one
    bundle: true
    excludes:
  # set the priority of this plugin,
  # lower means it will be executed first, default is 10
  priority: 12

NexT Information

NexT Version:

• [x ] Latest Master branch
• Latest Release version
• Old version

NexT Scheme:

• [x ] All schemes
• Muse
• Mist
• Pisces
• Gemini

NexT Configuration:

none

Other Information

hexo-filter-optimize cause Valine comments not work

Hi,
When I use hexo-filter-optimize, even js code run new Valine({
el: '#comments' ,
verify: {{ theme.valine.verify }},
notify: {{ theme.valine.notify }},
appId: '{{ theme.valine.appid }}',
appKey: '{{ theme.valine.appkey }}',
placeholder: '{{ theme.valine.placeholder }}',
avatar:'{{ theme.valine.avatar }}',
guest_info:guest,
pageSize:'{{ theme.valine.pageSize }}' || 10,
}); but the comments element doesn't show. Console no errors.
Anyone know how to let it works?

CSS filter causes icons to disappear in Muses

Enabling the option:
css:
enable: true
Makes FontAwesome icons disappear when deployed to netlify, alright locally(probably due to the fact I have it installed). NeXT 6.0.3, Muses scheme

Screenshot of the problem: https://abload.de/img/2018-01-31-14-06-5a71a4pzz.png

这个有效么？为什么我弄了之后还起了反作用？

这是没用的时候，看红圈，一篇文章编译出来是40529个字符

使用之后，看同一篇文章，有9万多个字符

hexo-filter-optimize cause Valine comments not work

Hi,
When I use hexo-filter-optimize, even js code run new Valine({
el: '#comments' ,
verify: {{ theme.valine.verify }},
notify: {{ theme.valine.notify }},
appId: '{{ theme.valine.appid }}',
appKey: '{{ theme.valine.appkey }}',
placeholder: '{{ theme.valine.placeholder }}',
avatar:'{{ theme.valine.avatar }}',
guest_info:guest,
pageSize:'{{ theme.valine.pageSize }}' || 10,
}); but the comments element doesn't show. Console no errors.
Anyone know how to let it works?

启用bundle loaded js files into one之后文章内所有的代码失去高亮

如题，下面是问题截图（ps，请问这个大概该怎么解决，希望大佬指明思路）：

js.excludes 参数是无效的

首先开启 js.bundle 后会导致 Valine 无法正确加载评论数和评论。
我试着排除 Valine 评论相关的 js, 发现使用 js.excludes 排除操作是无效的，对于任意的 js 文件都是如此。

sidebarInner.affix is not a function

↑ title