Skip to content

Commit

Permalink
perf: tree shaking Bootstrap CSS (#1736)
Browse files Browse the repository at this point in the history
  • Loading branch information
cotes2020 committed May 11, 2024
1 parent ddb48ed commit 363a3d9
Show file tree
Hide file tree
Showing 13 changed files with 69 additions and 34 deletions.
4 changes: 4 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@ package-lock.json

# IDE configurations
.idea
.vscode
!.vscode/settings.json
!.vscode/extensions.json

# Misc
_sass/dist
assets/js/dist
2 changes: 1 addition & 1 deletion _config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -214,7 +214,7 @@ exclude:
- tools
- README.md
- LICENSE
- rollup.config.js
- "*.config.js"
- package*.json

jekyll-archives:
Expand Down
3 changes: 0 additions & 3 deletions _data/origin/basic.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
3 changes: 0 additions & 3 deletions _data/origin/cors.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
4 changes: 3 additions & 1 deletion _includes/head.html
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,9 @@
{% endunless %}

<!-- Bootstrap -->
<link rel="stylesheet" href="{{ site.data.origin[type].bootstrap.css | relative_url }}">
{% unless jekyll.environment == 'production' %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
{% endunless %}

<!-- Theme style -->
<link rel="stylesheet" href="{{ '/assets/css/:THEME.css' | replace: ':THEME', site.theme | relative_url }}">
Expand Down
8 changes: 4 additions & 4 deletions _posts/2019-08-09-getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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
Expand All @@ -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
Expand Down
2 changes: 2 additions & 0 deletions _sass/main.bundle.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
@import 'dist/bootstrap';
@import 'main';
6 changes: 5 additions & 1 deletion assets/css/jekyll-theme-chirpy.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
---
---

@import 'main';
@import 'main
{%- if jekyll.environment == 'production' -%}
.bundle
{%- endif -%}
';

/* append your custom style below */
9 changes: 6 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand All @@ -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",
Expand Down
23 changes: 23 additions & 0 deletions purgecss.config.js
Original file line number Diff line number Diff line change
@@ -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/]
}
};
6 changes: 3 additions & 3 deletions tools/init
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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() {
Expand Down
31 changes: 17 additions & 14 deletions tools/release
Original file line number Diff line number Diff line change
Expand Up @@ -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=(
Expand Down Expand Up @@ -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
Expand All @@ -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
}
Expand All @@ -157,7 +160,7 @@ merge() {
}

main() {
check
init

if $opt_pre; then
prepare
Expand Down

0 comments on commit 363a3d9

Please sign in to comment.