
最近、割と耳にするようになってきた、Webpack の bundle.js のサイズを減らす話。自分でもやってみたので、結果を紹介します。

> 本当はもう少し減らせるかもねー

## はじめに

現在の使っているライブラリはこんな感じです。

- React
- Redux + redux-observable

ちなみに 2 つのアプリケーションがあるので、bundle は 2 つに分けてます。

最初の状態はこちらです。サードパーティのライブラリ(node_modules)のサイズが大きいことがわかります。

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2018/bundle1.png)

```txt
File sizes after gzip:

629.89 KB build/static/js/organization.js
595.88 KB build/static/js/applicant.js
49.28 KB build/static/css/organization.css
49.26 KB build/static/css/applicant.css
```

大きいのは、まず`highlight.js`ですね。

```txt
// ()の中はGzipしたサイズ
--------------------------------
highlight.js  750KB(190KB)
C3.js         677KB(93KB)
rx.js         686KB(32KB)
joi-browser   382KB(40KB)
```

## highlight.js のサイズを減らす

やりかたは前に書いた自分の記事を参考に。。。

- [highlight\.js を小さくバンドルする方法 \| I am mitsuruog](https://blog.mitsuruog.info/2017/12/how-bundle-size-makes-smaller)

結果:

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2018/bundle2.png)

```txt
File sizes after gzip:

456.75 KB build/static/js/organization.js
422.79 KB build/static/js/applicant.js
49.7 KB build/static/css/organization.css
49.69 KB build/static/css/applicant.css
```

`highlight.js`は「**750KB(90KB) => 90KB(17KB)**」になりました。

## RxJS のサイズを減らす

やりかたはこれを参考にしました。

- [RxJS を小さくバンドルする方法。import 文の書き方で容量が変わる \- Qiita](https://qiita.com/clockmaker/items/5e2207b14dac97c4ede1)

結果:

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2018/bundle3.png)

```txt
File sizes after gzip:

430.94 KB build/static/js/organization.js
397.02 KB build/static/js/applicant.js
49.7 KB build/static/css/organization.css
49.69 KB build/static/css/applicant.css
```

`RxJS`は「**686KB(32KB) => 164KB(9KB)**」になりました。

## lodash のサイズを減らす

`C3.js`と`joi-browser`はパッとみた感じ減らすのちょっと難しそうだと感じたので、`lodash`のサイズを減らしてみることにしました。

通常の`lodash`は ES6 のモジュール形式ではないので、ES6 モジュール形式でビルドされている[lodash-es](https://www.npmjs.com/package/lodash-es)の方を使います。

これまで import していた箇所をこのように変えていきます。

```diff
- import { isEqual } from "lodash";
+ import isEqual from "lodash-es/isEqual";
```

結果:

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2018/bundle4.png)

```txt
File sizes after gzip:

414.23 KB build/static/js/organization.js
380.24 KB build/static/js/applicant.js
49.69 KB build/static/css/organization.css
49.68 KB build/static/css/applicant.css
```

`lodash`は「**526KB(24KB) => 87KB(5KB)**」になりました。

## まとめ

だいたい 3 割くらい減らすことができました。

```txt
File sizes after gzip:

build/static/js/organization.js
  629.89 KB => 414.23 KB (65.7%)
build/static/js/applicant.js
  595.88 KB => 397.02 KB (66.6%)
```

Webpack 便利なのでついライブラリ追加してしまいがちですが、バンドルサイズが大きくなってないか常に気をつけたいですね。
バンドルサイズの測定は**webpack-bundle-analyzer**を使って行いました。

- [webpack-contrib/webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer)


Webpackでビルドしたbundleファイルのサイズを減らす


プロジェクトの webpack のバンドルサイズを計測して見たところ、[highlight.js](https://highlightjs.org/)が結構な割合を占めていたので、サイズを小さくする方法を試してみました。

## はじめに

この辺りの記事を参考にしています。

- [Reducing bundle size of Highlight\.js with Webpack \| Brian Jacobel](https://bjacobel.com/2016/12/04/highlight-bundle-size/)
- [Reducing bundle size of Highlight\.js with Webpack 2 \| Iris Schaffer](https://irisschaffer.com/reducing-bundle-size-of-highlight.js-with-webpack2)

## import 文の書き方でサイズが小さくなる

結論からいうと、面倒でも利用する言語ファイルを`import`した方がサイズが小さくなります。

通常のやり方。

```js
// 750.01KB
import highlight from "highlight.js";
```

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2017/bundle-before.png)

**750.01KB**。うーん。でかい。。。
なんだか全ての言語ファイルがバンドルされている気がする。。。

次は使う言語だけ`import`した場合。

```js
// 36.36KB
import highlight from "highlight.js/lib/highlight";
import css from "highlight.js/lib/languages/css";
import java from "highlight.js/lib/languages/java";
import javascript from "highlight.js/lib/languages/javascript";
import xml from "highlight.js/lib/languages/xml";

highlight.registerLanguage("javascript", javascript);
highlight.registerLanguage("css", css);
highlight.registerLanguage("java", java);
highlight.registerLanguage("xml", xml);
```

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2017/bundle-after.png)

**36.36KB**！！
かなりスリムになりました。

## なぜサイズが小さくなったのか？

npm install した highlight.js の中身を見ると、全ての言語ファイルを呼び出していました。
そのため、`import highlight from "highlight.js`しただけの場合、自動的に全ての言語ファイルもバンドルされてしまいます。

```js
var hljs = require('./highlight');

hljs.registerLanguage('1c', require('./languages/1c'));
hljs.registerLanguage('abnf', require('./languages/abnf'));
hljs.registerLanguage('accesslog', require('./languages/accesslog'));
hljs.registerLanguage('actionscript', require('./languages/actionscript'));

...

module.exports = hljs;
```

なるほど、面倒でも一つ一つ`import`した方が良さそうですね。

## まとめ

こんな単純なことでバンドルサイズが減らせるとは。恐ろしや。。。

> サイズの測定は一度 webpack でビルドしてから[danvk/source\-map\-explorer](https://github.com/danvk/source-map-explorer)を使って測定しました。

作業していたらこんな記事を見つけました。アプローチは同じです。

- RxJS を小さくバンドルする方法。import 文の書き方で容量が変わる - Qiita <https://qiita.com/clockmaker/items/5e2207b14dac97c4ede1>


highlight.jsを小さくバンドルする方法

アイコンなどの画像には、少し前まで CSS Sprites を使うことが多かったと思います。しかし、最近は CSS でスタイリングできるため、カスタムフォントを作成して使用することが増えてきたように感じます。

今回は、webpack と Sass を使ってカスタムフォントを使用する方法と、その際にハマりやすい`url()`での相対パス指定方法について紹介します。



## tl;dr

- Sass でのカスタムフォントの使い方
- webpack でカスタムフォントをロードする方法
- Sass での`url()`での相対パスの指定方法のハマりポイント

## はじめに

はじめに登場人物が多いので、全体のフォルダ構成を明らかにしておきます。
JavaScript のフレームワークは React を使ったのもを想定していますが、カスタムフォント周りの設定については他のフレームワークでも代用できると思います。

```
src/
  components/
    icon/
      icon.scss
      icon.jsx
      My-font.eot
      My-font.woff
      My-font.ttf
      My-font.svg
  entry.js
  style
    style.scss
 webpack.config.js
```

`entry.js`がアプリケーションのエントリーファイルです。
`style.scss`は Sass のエントリーファイルで、`icon.scss`を`@import`しています。
`entry.js`がロードされる時に、`style.scss`もロードされインポートされている Scss ファイルがコンパイルされます。

```scss
// src/style.scss
@import "../components/icon/icon.scss";
```

## Sass でのカスタムフォントの使い方

### Sass ファイルでカスタムフォントを読み込む

カスタムフォントを読み込むには`@font-face`を利用して`font-family`にフォント名を設定します。

カスタムフォントの読み込みについては、Sass ではなく CSS の範疇ですし、詳細については他に良い記事が多くあるのでここでは触れません。

```scss
// src/components/icon/icon.scss
@font-face {
  font-family: "SuperCoolMyFont";
  src: url("./My-font.eot"),
    /* IE9 Compat Modes */ url("./My-font.eot?iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("./My-font.woff") format("woff"),
    /* Pretty Modern Browsers */ url("./My-font.ttf") format("truetype"), /* Safari, Android, iOS */
      url("./My-font.svg#myfont") format("svg"); /* Legacy iOS */
}
```

### icon コンポーネントの作成

icon コンポーネントは stateless function components で作成した非常にシンプルなものです。
将来的には、アイコンの種類やサイズを prop から渡せるようにするべきだと思います。

```js
// src/components/icon/icon.jsx
exports default function Icon() => {
  return <span className="icon" />
}
```

### icon のスタイリング

icon のスタイリングについては、Bootstrap など既存の CSS フレームワークを参考にするのがいいと思います。
基本的には icon のベースとなるスタイルに`font-family`でフォントを指定した後、`content`でフォントの Unicode を設定すればいいです。

```scss
// src/components/icon/icon.scss
.icon {
  position: relative;
  display: inline-block;

  font-family: "SuperCoolMyFont";
  font-style: normal;
  font-weight: normal;
  font-size: 24px;

  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  &:before {
    content: "\01";
  }
}
```

### フォントの Unicode の探し方(番外編)

フォントの Unicode の確認方法については、自分の場合は SVG ファイルから探すようにしています。
(正直、これがスマートな方法かどうかわかりません。)

SVG ファイルを開くと`unicode`要素があるので、そこから Unicode を抽出します。
例えば、`unicode="&#x01;"`の場合は`&#x`を`\`に変換して`\01`として使います。

```
// src/components/icon/My-font.svg
// 抜粋です
<glyph unicode="&#x01;" d="something cool shape" />
```

もっと正しい方法があったら教えて欲しいです。

## webpack でカスタムフォントをロードする方法

webpack でカスタムフォントを使うためには、[url-loader](https://github.com/webpack/url-loader)を使って各フォントファイルをロードできるようにする必要があります。

```js
// webpack.config.js
// 抜粋です
loaders: [
  {
    test: /\.svg$/,
    loader: "url?mimetype=image/svg+xml&name=[path][name].[ext]",
  },
  {
    test: /\.woff$/,
    loader: "url?mimetype=application/font-woff&name=[path][name].[ext]",
  },
  {
    test: /\.woff2$/,
    loader: "url?mimetype=application/font-woff2&name=[path][name].[ext]",
  },
  {
    test: /\.[ot]tf$/,
    loader: "url?mimetype=application/octet-stream&name=[path][name].[ext]",
  },
  {
    test: /\.eot$/,
    loader:
      "url?mimetype=application/vnd.ms-fontobject&name=[path][name].[ext]",
  },
];
```

`name`の部分は好みで変更してください。

私の場合は SVG ファイルをフォントと画像で利用することが多く、これらを別のフォルダで管理することが多いので、格納元のディレクトリ構造そのままで出力してくれる`[path][name].[ext]`を好んで利用しています。

## Sass での`url()`での相対パスの指定方法のハマりポイント

ところが、上の方法では font ファイルが参照できずエラーとなってしまいます。

```
Module not found: Error: Cannot resolve 'file' or 'directory' . /My-font.svg
```

これは現時点では、Sass のコンパイラが URL の書き換えをサポートしていないため、`css-loader`を利用する場合は Sass のエントリーファイルから相対パス指定する必要があるからです。

- [sass-loader: Problems with url(...)](https://github.com/jtangelder/sass-loader#problems-with-url)

そのため、上の`icon.scss`でのパス指定は次のようにする必要があります。

```scss
// src/components/icon/icon.scss
$font-path: "../components/icon/";
@font-face {
  font-family: "SuperCoolMyFont";
  src: url("#{$font-path}My-font.eot"),
    /* IE9 Compat Modes */ url("#{$font-path}My-font.eot?iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("#{$font-path}My-font.woff") format("woff"),
    /* Pretty Modern Browsers */ url("#{$font-path}My-font.ttf") format("truetype"),
    /* Safari, Android, iOS */ url("#{$font-path}My-font.svg#myfont") format("svg"); /* Legacy iOS */
}
```

これで、相対パスの問題は解決されてフォントを読み込むことができるました。しかし、相対パスの指定が実物のフォントと異なるので違和感が残ります。

私の場合、`$font-path`を Sass のエントリーファイルに移動することで、その違和感を解消しています。

```scss
// src/style.scss
$font-path: "../components/icon/";
@import "../components/icon/icon.scss";

// src/components/icon/icon.scss
@font-face {
  font-family: "SuperCoolMyFont";
  src: url("#{$font-path}My-font.eot"),
    /* IE9 Compat Modes */ url("#{$font-path}My-font.eot?iefix") format("embedded-opentype"),
    /* IE6-IE8 */ url("#{$font-path}My-font.woff") format("woff"),
    /* Pretty Modern Browsers */ url("#{$font-path}My-font.ttf") format("truetype"),
    /* Safari, Android, iOS */ url("#{$font-path}My-font.svg#myfont") format("svg"); /* Legacy iOS */
}
```

これなら違和感なしです。

## まとめ

webpack+Sass でカスタムフォントを使う方法でした。
Sass の相対パスまわりでハマるケースが多いのではないかと思います。

`url()`に関してはフォントだけではなく画像についても同じことが言えるので、それぞれのエコシステムの癖を把握する必要があることを痛感しました。
この辺りは、あまり最近のフロントエンド開発に慣れてない人にとっては、学習が難しい部分となりそうな予感がします。

この記事を書くにあたって、次の記事も参考にしています。

- [Working with Fonts with Webpack | Adrian Hall](https://shellmonger.com/2016/01/22/working-with-fonts-with-webpack/)
- [Using @font-face | CSS-Tricks](https://css-tricks.com/snippets/css/using-font-face/)

webpack+Sass+reactでカスタムフォントを使う

一手間必要だったのでメモ。  
長いので Salesforce Lightning Design System(以下、SLDS)とします。



## 元ネタ

こちらの内容とほぼ一緒です。

Webpack config example · Issue #127 · salesforce-ux/design-system  
https://github.com/salesforce-ux/design-system/issues/127

## 手順

webpack をあまり触り慣れてない人向けのメモ。

### SLDS を npm install する

```
npm install --save @salesforce-ux/design-system
```

### index.scss の追加

SLDS は sass で作られているので、`index.scss`で SLDS の本体を`@import`するようにします。  
これを webpack で処理して、`style.css`として出力していきます。

```scss
@import "~@salesforce-ux/design-system/scss/index.scss";
```

### webpack.config.js の設定

webpack で css を扱うためにいくつか loader が必要です。まだの場合はインストールしておいてください。

```sh
# 各種ローダー
npm install --save-dev file-loader style-loader css-loader sass-loader
# 途中sassをコンパイルするために
npm install --save-dev node-sass
# webpackで処理したcssをファイル出力するために
npm install --save-dev extract-text-webpack-plugin
```

`webpack.config.js`にて`scss`を処理するようにします。

```js
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: "./entry.js",
  output: {
    path: __dirname,
    filename: "bundle.js",
  },
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract(
          "style-loader",
          "css-loader!sass-loader"
        ),
      },
    ],
  },
  plugins: [new ExtractTextPlugin("style.css")],
};
```

これで、SLDS が`style.css`に含まれるようになります。

### アプリケーションへの組み込み

アプリケーションへの組み込みは webpack のエントリポイント(この例だと`entry.js`)で、`index.scss`を呼び出すと OK です。

```js
// entry.js
require("./index.scss");
console.log("Hello Salesforce Lightning Design System!!");
```

最後に`index.html`で webpack で出力された`style.css`を利用すれば OK。

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <script src="./bundle.js"></script>
  </body>
</html>
```

### font ファイルのロード(追記:2015/01/03)

上の方法では SLDS の font が正しくロードできず、font ファイルのリクエストがすべて 404 エラーになっていました。

まず、`webpack.config.js`の`module.loaders`に file-loader を追加して、font ファイルをコピーするようにします。

```js
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: "./entry.js",
  output: {
    path: __dirname,
    filename: "bundle.js",
  },
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract(
          "style-loader",
          "css-loader!sass-loader"
        ),
      },
      {
        test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
        loader: "file-loader?&name=/assets/fonts/[name].[ext]",
      },
    ],
  },
  plugins: [new ExtractTextPlugin("style.css")],
};
```

これで、`/assets/font`以下に font ファイルがコピーされるようになりましたが、  
SLDS 内部の font 指定が絶対パス指定されているため、このままでは font が webpack で処理されません。

`index.scss`にて SLDS 内部の Sass 変数を書き換えて、webpack で処理できるようにします。

```scss
// SLDS内部で使われているfontのpath設定
$static-font-path: "~@salesforce-ux/design-system/assets/fonts/webfonts";

@import "~@salesforce-ux/design-system/scss/index.scss";
```

font の絶対パスの件は本家に似たような Issue がありますので、Sass 変数の置き換え作法は、今後のためにも知っておいた方がよろしいかと思います。

Compiling index-ltng.scss results in CSS that does not load salesforce fonts · Issue #71 · salesforce-ux/design-system https://github.com/salesforce-ux/design-system/issues/71

これで font も読み込むことができました。  
めでたし、めでたし。

## まとめ

あくまで最小構成です。  
React.js を触っていると webpack を使うことが多いのですが、ちょっとしたサンプルであれば`bower`か`CDN`の方が楽ですね。

Tag: webpack

Webpackでビルドしたbundleファイルのサイズを減らす

highlight.jsを小さくバンドルする方法

webpack+Sass+reactでカスタムフォントを使う

webpackでSalesforce Lightning Design Systemを使う