webpack build 高速化 まとめ

この記事はTypescript Tutorial React & Webpackを出汁にしています。
$ npm install -D webpack@beta typescript@beta ts-loader source-map-loader @types/react-dom @types/react
$ npm install -S react@next react-dom@next

途中webpackのバージョンが更新されていますがこの記事に関しては問題ないと思われます。
気になる方は What's new in webpack 2

エピソード 1 「Qiita 新着順で眺めてたら記事発見」

webpackのDLLバンドルを使ってビルドを速くする
pirosikickさんの投稿でHappyPackの存在を知る。

HappyPackに関する日本語の記事は一つもなかったので、公式ドキュメントとソースをさっと流し読みして試してみる。
$ npm install -D happypack

webpack.config.js

var path = require('path');
var HappyPack = require('happypack');

module.exports = {
  entry: "./src/index.tsx",
  output: {
    path: __dirname + "/dist",
    filename: "bundle.js",
  },
  devtool: "source-map",
  resolve: {
    extensions: ["", ".ts", ".tsx", ".js"]
  },
  // externalsも有効
  externals: {
    "react": "React",
    "react-dom": "ReactDOM"
  },
  plugins: [
    new HappyPack({
      cache: true,
      loaders: ["ts!source-map"],
      threads: 4
    })
  ],
  module: {
    loaders: [
      {
        test: /\.tsx?$/,
        loader: path.resolve(__dirname, "./node_modules/ts-loader")
      }
    ],
    preLoaders: [
      {
        test: /\.js$/,
        loader: path.resolve(__dirname, "./node_modules/source-map-loader")
      }
    ],
  }
};

happypackは特別に

• externals(後に詳細)有効
• HappyPackの機能のキャッシュ有効
• スレッド４つ

エピソード 2 「DLLバンドルは？」

エピソード 3 「何もしない場合？」

エピソード 4 「何もしないよりマシだったけど、気になるからおとなしく公式Tutorialで試してみる」

エピソード 5 結論

webpack.config.js

module.exports = {
    entry: "./src/index.tsx",
    output: {
        filename: "./dist/bundle.js",
    },

    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",

    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
    },

    module: {
        loaders: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
            { test: /\.tsx?$/, loader: "ts-loader" }
        ],

        preLoaders: [
            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { test: /\.js$/, loader: "source-map-loader" }
        ]
    },

    // When importing a module whose path matches one of the following, just
    // assume a corresponding global variable exists and use that instead.
    // This is important because it allows us to avoid bundling all of our
    // dependencies, which allows browsers to cache those libraries between builds.
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    },
};

つよさ： externals > dll >> happypack >>> default

• HappyPackは見込み無し
• dllは見込みあり
• externalsはwebpack.config.jsに記述するだけで最高パフォーマンス

貴重な時間を浪費してしまった😢

externalsについては公式ドキュメントやQiitaやGoogle検索で。

誤字脱字、情報の誤りはお教えください😢