はじめに
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というツールを使います。
必要なライブラリをインストールする
- 以下の2つをインストールします
- 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
のみを取得していることがわかります。つまり、先ほどは他の2つのファイルを取得する処理があったのですが、それがなくなっています。