From 363a3d936bbd688fa4f28527e85ef7dd3fe3a79b Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Sat, 11 May 2024 11:07:48 +0800 Subject: [PATCH] perf: tree shaking Bootstrap CSS (#1736) --- .gitignore | 4 ++++ _config.yml | 2 +- _data/origin/basic.yml | 3 --- _data/origin/cors.yml | 3 --- _includes/head.html | 4 +++- _posts/2019-08-09-getting-started.md | 8 +++---- _sass/main.bundle.scss | 2 ++ assets/css/jekyll-theme-chirpy.scss | 6 +++++- assets/lib | 2 +- package.json | 9 +++++--- purgecss.config.js | 23 +++++++++++++++++++++ tools/init | 6 +++--- tools/release | 31 +++++++++++++++------------- 13 files changed, 69 insertions(+), 34 deletions(-) create mode 100644 _sass/main.bundle.scss create mode 100644 purgecss.config.js diff --git a/.gitignore b/.gitignore index 3f4427c..d6bf509 100644 --- a/.gitignore +++ b/.gitignore @@ -17,6 +17,10 @@ package-lock.json # IDE configurations .idea +.vscode +!.vscode/settings.json +!.vscode/extensions.json # Misc +_sass/dist assets/js/dist diff --git a/_config.yml b/_config.yml index 0de0965..613b043 100644 --- a/_config.yml +++ b/_config.yml @@ -214,7 +214,7 @@ exclude: - tools - README.md - LICENSE - - rollup.config.js + - "*.config.js" - package*.json jekyll-archives: diff --git a/_data/origin/basic.yml b/_data/origin/basic.yml index 9f3415a..9027e6e 100644 --- a/_data/origin/basic.yml +++ b/_data/origin/basic.yml @@ -4,9 +4,6 @@ webfonts: /assets/lib/fonts/main.css # Libraries -bootstrap: - css: /assets/lib/bootstrap/bootstrap.min.css - toc: css: /assets/lib/tocbot/tocbot.min.css js: /assets/lib/tocbot/tocbot.min.js diff --git a/_data/origin/cors.yml b/_data/origin/cors.yml index 220d131..abedb6c 100644 --- a/_data/origin/cors.yml +++ b/_data/origin/cors.yml @@ -19,9 +19,6 @@ webfonts: https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Sour # Libraries -bootstrap: - css: https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css - toc: css: https://cdn.jsdelivr.net/npm/tocbot@4.25.0/dist/tocbot.min.css js: https://cdn.jsdelivr.net/npm/tocbot@4.25.0/dist/tocbot.min.js diff --git a/_includes/head.html b/_includes/head.html index 0e4725c..fd260c0 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -69,7 +69,9 @@ {% endunless %} - + {% unless jekyll.environment == 'production' %} + + {% endunless %} diff --git a/_posts/2019-08-09-getting-started.md b/_posts/2019-08-09-getting-started.md index 6653c62..1cea5be 100644 --- a/_posts/2019-08-09-getting-started.md +++ b/_posts/2019-08-09-getting-started.md @@ -21,8 +21,8 @@ Follow the instructions in the [Jekyll Docs](https://jekyllrb.com/docs/installat There are two ways to create a new repository for this theme: -- [**Using the Chirpy Starter**](#option-1-using-the-chirpy-starter) - Easy to upgrade, isolates irrelevant project files so you can focus on writing. -- [**GitHub Fork**](#option-2-github-fork) - Convenient for custom development, but difficult to upgrade. Unless you are familiar with Jekyll and are determined to tweak or contribute to this project, this approach is not recommended. +- [**Using the Chirpy Starter**](#option-1-using-the-chirpy-starter) — Easy to upgrade, isolates irrelevant project files so you can focus on writing. +- [**GitHub Fork**](#option-2-github-fork) — Convenient for custom development, but difficult to upgrade. Unless you are familiar with Jekyll and are determined to tweak or contribute to this project, this approach is not recommended. #### Option 1. Using the Chirpy Starter @@ -32,7 +32,7 @@ Sign in to GitHub and browse to [**Chirpy Starter**][starter], click the button Sign in to GitHub to [fork **Chirpy**](https://github.com/cotes2020/jekyll-theme-chirpy/fork), and then rename it to `USERNAME.github.io` (`USERNAME` means your username). -Next, clone your site to local machine. In order to build JavaScript files later, we need to install [Node.js][nodejs], and then run the tool: +Next, clone the repository to your local machine, make sure it has [Node.js][nodejs] installed, then go to the root directory of the repo and run the following command: ```console $ bash tools/init @@ -45,7 +45,7 @@ The above command will: 1. Check out the code to the [latest tag][latest-tag] (to ensure the stability of your site: as the code for the default branch is under development). 2. Remove non-essential sample files and take care of GitHub-related files. -3. Build JavaScript files and export to `assets/js/dist/`{: .filepath }, then make them tracked by Git. +3. Build CSS/JS assets files and then make them tracked by Git. 4. Automatically create a new commit to save the changes above. ### Installing Dependencies diff --git a/_sass/main.bundle.scss b/_sass/main.bundle.scss new file mode 100644 index 0000000..52e893f --- /dev/null +++ b/_sass/main.bundle.scss @@ -0,0 +1,2 @@ +@import 'dist/bootstrap'; +@import 'main'; diff --git a/assets/css/jekyll-theme-chirpy.scss b/assets/css/jekyll-theme-chirpy.scss index 1280b9e..d20545b 100644 --- a/assets/css/jekyll-theme-chirpy.scss +++ b/assets/css/jekyll-theme-chirpy.scss @@ -1,6 +1,10 @@ --- --- -@import 'main'; +@import 'main +{%- if jekyll.environment == 'production' -%} + .bundle +{%- endif -%} +'; /* append your custom style below */ diff --git a/assets/lib b/assets/lib index 29d7021..e8ef8fb 160000 --- a/assets/lib +++ b/assets/lib @@ -1 +1 @@ -Subproject commit 29d7021f45317d02df9a3297d3c52a30bd4ae795 +Subproject commit e8ef8fb673e88ae4404a4bc0d0f43d90bb774e60 diff --git a/package.json b/package.json index ef094a1..a52b377 100644 --- a/package.json +++ b/package.json @@ -13,11 +13,12 @@ }, "homepage": "https://github.com/cotes2020/jekyll-theme-chirpy/", "scripts": { - "build": "npm run build:js", + "build": "concurrently npm:build:*", + "build:css": "purgecss -c purgecss.config.js", "build:js": "rollup -c --bundleConfigAsCjs --environment BUILD:production", "watch:js": "rollup -c --bundleConfigAsCjs -w", - "lint:style": "stylelint _sass/**/*.scss", - "lint:fix:style": "npm run lint:style -- --fix", + "lint:scss": "stylelint _sass/**/*.scss", + "lint:fix:scss": "npm run lint:style -- --fix", "test": "npm run lint:scss" }, "dependencies": { @@ -37,8 +38,10 @@ "@semantic-release/changelog": "^6.0.3", "@semantic-release/exec": "^6.0.3", "@semantic-release/git": "^10.0.1", + "concurrently": "^8.2.2", "conventional-changelog-conventionalcommits": "^7.0.2", "husky": "^9.0.11", + "purgecss": "^6.0.0", "rollup": "^4.15.0", "rollup-plugin-license": "^3.3.1", "semantic-release": "^23.0.8", diff --git a/purgecss.config.js b/purgecss.config.js new file mode 100644 index 0000000..de370de --- /dev/null +++ b/purgecss.config.js @@ -0,0 +1,23 @@ +const fs = require('fs'); +const DIST_PATH = '_sass/dist'; + +fs.rm(DIST_PATH, { recursive: true, force: true }, (err) => { + if (err) { + throw err; + } + + fs.mkdirSync(DIST_PATH); +}); + +module.exports = { + content: ['_includes/**/*.html', '_layouts/**/*.html', '_javascript/**/*.js'], + css: ['node_modules/bootstrap/dist/css/bootstrap.min.css'], + keyframes: true, + variables: true, + output: `${DIST_PATH}/bootstrap.css`, + // The `safelist` should be changed appropriately for future development + safelist: { + standard: [/^collaps/, /^w-/, 'shadow', 'border', 'kbd'], + greedy: [/^col-/, /tooltip/] + } +}; diff --git a/tools/init b/tools/init index be8ac01..ed478d7 100755 --- a/tools/init +++ b/tools/init @@ -82,7 +82,7 @@ init_files() { rm -rf "$temp" ## Cleanup image settings in site config - _sedi "s/(^.*cdn:).*/\1/;s/(^avatar:).*/\1/" _config.yml + _sedi "s/(^timezone:).*/\1/;s/(^.*cdn:).*/\1/;s/(^avatar:).*/\1/" _config.yml fi # remove the other files @@ -91,8 +91,8 @@ init_files() { # build assets npm i && npm run build - # track the js output - _sedi "/^assets.*\/dist/d" .gitignore + # track the CSS/JS output + _sedi "/.*\/dist$/d" .gitignore } commit() { diff --git a/tools/release b/tools/release index 90b1823..351321a 100755 --- a/tools/release +++ b/tools/release @@ -15,6 +15,7 @@ NODE_SPEC="package.json" CHANGELOG="docs/CHANGELOG.md" CONFIG="_config.yml" +CSS_DIST="_sass/dist" JS_DIST="assets/js/dist" FILES=( @@ -79,17 +80,12 @@ _check_src() { done } -_check_node_packages() { - if [[ ! -d node_modules || "$(du node_modules | awk '{print $1}')" == "0" ]]; then - npm i - fi -} - -check() { +init() { _check_cli _check_git _check_src - _check_node_packages + echo -e "> npm install\n" + npm i } ## Bump new version to gem-spec file @@ -115,24 +111,31 @@ prepare() { build_gem() { if $opt_pkg; then BACKUP_PATH="$(mktemp -d)" - cp "$JS_DIST"/* "$BACKUP_PATH" + mkdir -p "$BACKUP_PATH"/css "$BACKUP_PATH"/js + [[ -d $CSS_DIST ]] && cp "$CSS_DIST"/* "$BACKUP_PATH"/css + [[ -d $JS_DIST ]] && cp "$JS_DIST"/* "$BACKUP_PATH"/js fi # Remove unnecessary theme settings - sed -i "s/^cdn:.*/cdn:/;s/^avatar:.*/avatar:/" $CONFIG + sed -i -E "s/(^timezone:).*/\1/;s/(^cdn:).*/\1/;s/(^avatar:).*/\1/" $CONFIG rm -f ./*.gem npm run build - git add "$JS_DIST" -f # add JS distribution files to gem + # add CSS/JS distribution files to gem package + git add "$CSS_DIST" "$JS_DIST" -f + + echo -e "\n> gem build $GEM_SPEC\n" gem build "$GEM_SPEC" - # resume the settings + echo -e "\n> Resume file changes ...\n" git reset git checkout . if $opt_pkg; then # restore the dist files for future development - mkdir -p "$JS_DIST" && cp "$BACKUP_PATH"/* "$JS_DIST" + mkdir -p "$CSS_DIST" "$JS_DIST" + cp "$BACKUP_PATH"/css/* "$CSS_DIST" + cp "$BACKUP_PATH"/js/* "$JS_DIST" rm -rf "$BACKUP_PATH" fi } @@ -157,7 +160,7 @@ merge() { } main() { - check + init if $opt_pre; then prepare