LoginSignup
52
45

More than 5 years have passed since last update.

webpack build 高速化 まとめ

Last updated at Posted at 2016-07-19

この記事は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")
      }
    ],
  }
};

happpack.png

happypackは特別に

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

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

dll-used.png

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

default.png

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

external.png

エピソード 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検索で。

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

52
45
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
52
45