Gatsbyビルドチューニング ビルド時間を15分から7分に短縮するためのTips 7選

query {
-  // 全画像を取得してしまう
-  allFile {
+  // 検索条件を指定して必要な画像だけ取得するようにする
+  allFile(filter: {relativePath: {regex: "/^thumbnail/*/"}}) {
    edges {
      node {
        childImageSharp {
          fluid {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  }
}

// 設定ファイルで3つの画像パスを指定する
module.exports = {
  featuredPosts: [
    '/blog/2019/05/09',
    '/blog/2018/05/08',
    '/blog/2016/03/18'
  ],
};

  query {
    images: allFile(filter: {relativePath: {regex: "/^thumbnail/*/"}}) {
      edges {
        node {
          childImageSharp {
-            // 記事の最大幅にあわせた少し小さめで低品質な画像を取得
-            fluid(maxWidth: 800, quality: 50, pngQuality: 50) {
+            // 生成画像枚数を減らすために、あえて縦横幅、クオリティをサムネイルに合わせる
+            fluid(maxWidth: 1200, quality: 90, pngQuality: 90) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }

  // OGP画像用に少し大きめで高品質な画像を取得
  query {
    images: allFile(filter: {relativePath: {regex: "/^thumbnail/*/"}}) {
      edges {
        node {
          childImageSharp {
            fluid(maxWidth: 1200, quality: 90, pngQuality: 90) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }

const sharp = require(`sharp`)
const glob = require(`glob`)
const fs = require(`fs`)
// 最適化したい画像のパスを正規表現で指定
const matches = glob.sync(`src/pages/**/*.{png,jpg,jpeg}`)
// Retinaを考慮し2倍にする
const MAX_WIDTH = 800 * 2

Promise.all(
  matches.map(async match => {
    const stream = sharp(match)
    const info = await stream.metadata()

    if (info.width <= MAX_WIDTH) {
      return
    }

    // 画像幅をMAX_WIDTHまで縮小して上書き
    const outputBuffer = await stream.resize(MAX_WIDTH).toBuffer()
    fs.writeFileSync(match, outputBuffer)
    console.log(`success resize markdown image. ${info.width} -> ${MAX_WIDTH}, ${match}`)

    return 'Success'
  })
)

  "scripts": {
    // 中略
    "optimizeImages": "node ./scripts/optimize-images.js",
    // 中略
  }

const glob = require(`glob`);
const fs = require(`fs`);
const path = require("path");
const imagemin = require('imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');
const imageminPngquant = require('imagemin-pngquant');

const addSizeInfo = (filePath) => {
  const state = fs.statSync(filePath);
  return {
    size: state.size,
    filePath
  }
};


(async () => {
  const matchesThumbnail = glob.sync(`src/images/thumbnail/**/*.{png,jpg,jpeg}`);
  const matchesPage = glob.sync(`src/pages/**/*.{png,jpg,jpeg}`);

  [...matchesThumbnail, ...matchesPage].map(addSizeInfo).forEach(async(factor) => {
    const filePath = factor.filePath;
    const fileDir = path.dirname(filePath)
    const fileExt = path.extname(filePath)

    if(['.png'].includes(fileExt)) {

      await imagemin([filePath], {
        destination: fileDir, // overwrite
        plugins: [
          imageminPngquant()
        ]
      });

      const compressedSize = fs.statSync(filePath).size;    
      console.log(`${factor.size} -> ${compressedSize} ${filePath}`);  

    } else if(['.jpg','.jpeg'].includes(fileExt)){

      await imagemin([filePath], {
        destination: fileDir, // overwrite
        plugins: [
          imageminMozjpeg()
        ]
      });

      const compressedSize = fs.statSync(filePath).size;    
      console.log(`${factor.size} -> ${compressedSize} ${filePath}`);  
    } else {
      console.log("Can't optimize", filePath)
    }
  })
})();

  "scripts": {
    // 中略
    "compressImages": "node ./scripts/compress-images.js",
    // 中略
  }

// 中略
[[plugins]]
  package = "netlify-plugin-gatsby-cache"
// 中略

  "scripts": {
    // 中略
    "build": "GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES=true gatsby-parallel-runner build --log-pages",
    // 中略
  }

version: 2.1
executors:
  node-executor:
    docker:
      - image: circleci/node:12
commands:
  gatsby-build:
    steps:
      - checkout
      - restore_cache:
          keys:
            # when lock file changes, use increasingly general patterns to restore cache
            - node-v1-{{ .Branch }}-{{ checksum "package-lock.json" }}
            - node-v1-{{ .Branch }}-
            - node-v1-
      - run: npm install
      - save_cache:
          paths:
            - ~/usr/local/lib/node_modules  # location depends on npm version
          key: node-v1-{{ .Branch }}-{{ checksum "package-lock.json" }}
      - restore_cache:
          keys:
            - gatsby-public-cache-{{ .Branch }}
            - gatsby-public-cache-
      - run: GATSBY_CPU_COUNT=2 NODE_OPTIONS="--max-old-space-size=8192" npm run build
      - save_cache:
          key: gatsby-public-cache-{{ .Branch }}
          paths:
            - ./public
workflows:
  version: 2
  build-deploy:
    jobs:
      - build:
          filters:
            branches:
              ignore:
                - master
      - release:
          filters:
            branches:
              only:
                - master
jobs:
  build:
    executor: node-executor
    working_directory: ~/repo
    steps:
      - gatsby-build
        - run:
          name: Netlify Deploy
          command: ./node_modules/.bin/netlify deploy --dir=public --message "deploy preview from $CIRCLE_BRANCH" --auth $NETLIFY_ACCESS_TOKEN
  release:
    executor: node-executor
    working_directory: ~/repo
    steps:
      - gatsby-build
        - run:
          name: Netlify Deploy
          command: ./node_modules/.bin/netlify deploy --prod --dir=public --message "deploy from $CIRCLE_BRANCH" --auth $NETLIFY_ACCESS_TOKEN