はじめに

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のみを取得していることがわかります。つまり、先ほどは他の２つのファイルを取得する処理があったのですが、それがなくなっています。

PostCSSを使ってCSSの@importをインラインで取り込みウェブサイトの高速化を試みる