import * as 構文とパフォーマンス最適化 - Qiita

JavaScriptには、import * as という構文があります。これは、インポート先のモジュールの中身全部をオブジェクト（モジュール名前空間オブジェクト）として取得できる構文です。 import * as mod from "./some-module"; console.log(mod.foo, mod.bar); たまに、「この構文を使うとTree Shakingが効かなくなる」といった説明が見られることがありますが、必ずしもそうではありません。そこで、この記事ではimport * as構文とパフォーマンス最適化に関連する正しい知識と、その背景をご紹介します。 webpackで検証してみよう Tree shakingを行うのはモジュールバンドラであることが知られています。そこで、webpackを使って色々と構文を検証してみましょう。今回は次のような設定を用います。これは最適化を

[tkmkg8m]

“import * as modのように得たモジュール名前空間オブジェクトは常にmod.fooのようにプロパティアクセスの形で使えば大丈夫”（tree shakingされるし export 名のmanglingもされる）

[uva]

「……。嘘です。エンジニアリングにおいて「気をつける」というのはまともな解決策ではありません。ちゃんと仕組みで解決しましょう」耳が痛い

[sigwyg]

ヲチでちゃんと対策してて流石。エンジニアの鑑

[yarumato]

“import * as構文に対してwebpackがどう振る舞うのか最小構成で検証して、最適化が効くと確認できた。最適化が効かない場合も存在。webpackはコードの意味を変えない原則があると考えれば理解できる”

[mon_sat]

そうだったのかー。今後は安心して * as foo できる。どんな関数が用意されてるか把握してないライブラリ使うときって foo. して探したりしてるのよね。

[mominis]

良い。ありそうでなかったやつなんだろうか