Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Webpackの凄さ

 Webpackの凄さ

Webpackの凄さを紹介します。

D497c45a1fb82c383c62ef994a7c0fdc?s=128

SHUN/しゅん

September 30, 2020
Tweet

Transcript

  1. Webpackの凄さ SHUN/しゅん

  2. 自己紹介 見ろ: https://shun.technology

  3. Webpackとは 一つのJavaScriptを起点にして、そこからimport文を頼りにファ イルを芋づる式に引っ張って1ファイルにまとめる JavaScript以外にもTypeScriptのコンパイルやBabelによるト ランスパイルなども可能

  4. すごいところ1: Tree Shaking importされたファイルの中で未使用のコードを削除する import { flatten } from “lodash-es”;

    console.log(flatten([1, [2, [3]]]));
  5. すごいところ2: Dead Code Elimination 未到達コードの消去 if (process.env.NODE_ENV === “production”) {

    /* 本番時に使うコード */ } ー>開発時だとif文ごと消える
  6. Demo

  7. まとめ Webpackはまじですごい バンドル遅い!とか言わないであげて 嫌われがちなWebpackの設定だけどチューニングするのは楽 しい

  8. おわり