はじめに
CSSファイルに他のCSSファイルの内容を取り込むときに使う @importっていうのがあるんですけど、これって便利ですよね。
でも、@importってどんなふうに動いているの？っていうのを見てみると、@importで指定しているCSSファイルを毎回取得しているんです。
つまり、@importを使えば使うほど（キャッシュが効くかもですが）通信回数が増えてしまいます。
これはウェブサイトの表示速度に大きく関わる問題であります。
本記事では、@importで書かれたCSSを使っているウェブサイトの高速化のお話をしたいと思います。
前提
- npmが使える
筆者の環境
- npm version: 7.11.2
@importの動きを見てみる
まずは @importを使っているCSSファイルを導入しているウェブサイトでどういう処理が走っているか見てみます。あくまでも通信箇所についてです。
用意するもの
- index.html
- css/main.css（index.htmlで読み込むCSS）
- css/foo.css（main.cssでimportする）
- css/bar.css（main.cssでimportする）
index.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="./css/main.css">
</head>
<body>
<h1>This is header</h1>
<p>Hello!</p>
</body>
</html>css/main.css
@import "foo.css";
@import "bar.css";
body {
background: white;
}css/foo.css
p {
color: red;
}css/bar.css
h1 {
color:green
}ブラウザで開いてみる
- 作成した
index.htmlをブラウザ（Chrome）で見てみます
ネットワークを見てみる
- ChromeのDev ToolsのNetworkを見てみます
- 赤枠で囲われている箇所をご覧ください
index.htmlではmain.cssしか呼び出していないですが、実際にはmain.cssで@importされているfoo.cssとbar.cssの取得処理も走っています
PostCSSを使う
PostCSSというツールを使います。
必要なライブラリをインストールする
- 以下の２つをインストールします
- postcss-import
- cssnano
$ npm install -D postcss-import cssnano設定ファイルを用意する
- postcss.config.jsを作成する
module.exports = {
plugins: [
require('postcss-import')(),
require('cssnano')({
autoprefixer: false
})
]
}cssディレクトリ配下のCSSファイルに向けて処理を実行する
- 以下のコマンドを実行する
$ ./node_modules/.bin/postcss -c ./postcss.config.js ./css/**/*.css --replace
[
'/css/bar.css',
'/css/foo.css',
'/css/main.css'
]中身を見てみる
- コマンド実行後に
main.cssを見てみます
p{color:red}h1{color:green}body{background:#fff}- 見事に
bar.cssとfoo.cssの中身が入っているのがわかります - また、容量を最小限にするためにminifyされています
では index.htmlをChromeで再度開いて見てみます
見た目は変わっていませんね。では通信はどうでしょうか
index.htmlで取り込んでいる main.cssのみを取得していることがわかります。つまり、先ほどは他の２つのファイルを取得する処理があったのですが、それがなくなっています。
