前回までのお話

TypeScriptの話とは少しずれるので、外伝という形で続きます。
チュートリアルの②ではC3.jsを使って円グラフを描くプログラムを作成しました。
しかし、このライブラリ(正確にはC3.jsが依存してるD3.js)は、かなりサイズが大きくて、webpackでもprodoctionモードで結合すると、サイズが大きすぎてパフォーマンスに悪影響を受ける可能性があると警告を受けます。

コマンドプロンプト
> webpack app.js --output bundle.js --mode=production
Hash: 2278e9df9a528ebf2070
Version: webpack 4.1.1
Time: 6398ms
Built at: 2018-3-20 14:28:20
    Asset     Size  Chunks                    Chunk Names
bundle.js  333 KiB       0  [emitted]  [big]  main
Entrypoint main [big] = bundle.js
   [2] ./app.js 537 bytes {0} [built]
    + 2 hidden modules

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  bundle.js (333 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (333 KiB)
      bundle.js


WARNING in webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

またチュートリアルの①でもやっていたようなwebpack-dev-serverを使って、自動リコンパイル/自動リロードをしようとするとものすごく遅いです。
こういった問題の場合はwebpackの機能である「Chunk」を使って、外部ライブラリをもう一つのモジュールとして括りだしてあげるのが定番なので、それをやってみます。
ただしそもそもC3.jsとそれが依存しているライブラリのサイズが大きいので、webpackのサイズが大きすぎるという警告は消えません。それでもリコンパイルとリロードをする範囲が限定されるのでメリットはあります。

webpack4.0のChunk

さてwebpackのChunk機能ですが、webpackが4.0になって大きく利用方法が変わりました。
詳しくは下記の記事を参考にされると良いと思います。

「webpack 4 の optimization.splitChunks の使い方、使い所 〜廃止された CommonsChunkPlugin から移行する〜」
(https://qiita.com/soarflat/items/1b5aa7163c087a91877d)

この記事に従ってwebpack.config.jsを次のように記述します。

webpack.config.js
const path = require('path');
module.exports = {
    entry: {
        bundle: './app.ts'
    },  
    output: {
        path: path.join(__dirname,'/'),
        filename: '[name].js'
    },
    // ここからチャンクの設定
    optimization: {
      splitChunks: {
        name: 'vendor',
        chunks: 'initial',
      }
    },
    // ここまでチャンクの設定
    resolve: {
        extensions:['.ts','.js']
    },
    devServer: {
        contentBase: path.join(__dirname,'/')
    },
    module: {
        rules: [
            {
                test:/\.ts$/,loader:'ts-loader'
            }
        ]
    }
}

これでwebpackから生成されるファイルは二つになりました。それはこのチュートリアルで作っているプログラムが収められた"bundle.js"と、外部ライブラリがまるごと収められた"vendor.js"です。
ファイルが二つになったので、index.htmlに下記のように書き加えます。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>円グラフ</title>
    <link href="node_modules/c3/c3.min.css" rel="stylesheet">
</head>
<body>
    <div id="chart"></div>
    <script src="vendor.js"></script> <!-- ← この行を追加 -->
    <script src="bundle.js"></script>
</body>
</html>

環境の構築

チュートリアル①でもやった内容ですが、再度、開発用のツールをインストールします。

コマンドプロンプト
npm install typescript ts-loader webpack webpack-cli webpack-dev-server --save-dev

JavaScriptではなるべくアプリケーション(プロジェクト)毎に必要なライブラリやツールを、管理/保持するようにします。そこでアプリケーションを新しく作るたびにライブラリも新たに入れ直す形になるのです。

npm用の設定ファイルpackage.jsonの"scripts"の部分を修正します。

package.json
{
  "name": "ts_c3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode=development",
    "start": "webpack-dev-server --mode=development"
  },
  // あとは省略
}

実行

ここまで来たら実行するだけです。
下記のコマンドでwebpack-dev-serverを立ち上げて、ブラウザで"http://localhost:8080"にアクセスしてください。

コマンドプロンプト
 npm start

実行結果はこちら!(チュートリアル②と変わってませんが…)

chart_ani.gif

 目次

TypeScriptチュートリアル① -環境構築編-
TypeScriptチュートリアル② -外部ライブラリの利用-
TypeScriptチュートリアル②外伝 -チャンク-

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.