YakuHanJP：Nuxtだとインポートが最適化される
Closedfirst published: 2018/12/01last updated: 2019/01/15
昨日からYakuHanJPデモサイトの新設・ライブラリのメンテナンスを始めていて、webpackで使う場合どうすんだっけ問題を追っていた。以前、テキトーにインポートしたらJSが500KBを超えてまずい感じだったので。
YakuHanJPのフォントファイルは1つが4KB程度だけど、必要のないファイルを含めてすべて読み込むと（4KB × 3フォーマット × 7ウェイト × 6パターン = 504KB）になる。
ゴシック体・明朝体・丸ゴシックそれぞれと全量・少量を同時に使うことはほぼ無いので、普通のサイトは（4KB × 3フォーマット × 7ウェイト × 1パターン = 84KB）、フォールバック省くと（4KB × 1フォーマット × 2ウェイト × 1パターン = 8KB）。
実際には8KBで済むのにBase64で埋め込んだら、不要な容量が100KB近く増えるのでまずい。ただ、これはwebpackの url-loader でファイルをBase64化させずに分離させられるようなので、その方法を少し調べていた。
とりあえず、Nuxtのサイトで設定してみよーと思ったのだけど...
{
"dependencies": {
"nuxt": "^2.3.4",
"yakuhanjp": "^3.0.0"
},
"devDependencies": {
"node-sass": "^4.10.0",
"sass-loader": "^7.1.0"
}
}@import "~yakuhanjp/dist/css/yakuhanjp.min.css";
@import "~yakuhanjp/dist/css/yakuhanjp_s.min.css";
@import "~yakuhanjp/dist/css/yakuhanmp.min.css";
@import "~yakuhanjp/dist/css/yakuhanmp_s.min.css";
@import "~yakuhanjp/dist/css/yakuhanrp.min.css";
@import "~yakuhanjp/dist/css/yakuhanrp_s.min.css";何も考えずに nuxt generate してみたらすでにその設定になっていた。
dist
├── _nuxt
│ └── fonts
│ ├── 0454d42.woff
│ ├── 0e08fa6.eot
│ ├── 0ecc45b.woff2
│ ├── 10619f2.eot
│ ├── 10728d7.eot
│ ├── 10ab976.woff2
│ ├── 11dfaf7.woff
│ ├── 1354316.eot
...どれが何なのかは分からないけど、容量やファイル数は変わらずなので node_modules/yakuhanjp/dist/fonts/ からコピーして再配置してくれたのだろう。webpackを素で使う場合もこういう設定でいけば良いのかも。