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

dynamic import あれこれ / dynamic import - overview...

shimataro
February 22, 2018

dynamic import あれこれ / dynamic import - overview and pitfalls

Node学園 29時限目の発表資料です
https://nodejs.connpass.com/event/78902/

shimataro

February 22, 2018
Tweet

More Decks by shimataro

Other Decks in Technology

Transcript

  1. 従来のIMPORT 従来のIMPORT ES2015で標準化 複数の import 方法が定義されている 詳細は を参照 import defaultMember

    from "module-name"; import * as name from "module-name"; import { member } from "module-name"; import { member as alias } from "module-name"; import { member1 , member2 } from "module-name"; import { member1 , member2 as alias2 , [...] } from "module-name" import defaultMember, { member [ , [...] ] } from "module-name"; import defaultMember, * as name from "module-name"; import "module-name"; MDN
  2. 動的IMPORTの需要 動的IMPORTの需要 例1: セッションデータの保存先をcon gで指定したい # config.yaml session: store: "connect-memcached"

    options: hosts: - "localhost" secret: "a secret key" import session from "express-session"; import Store from config.session.store; app.use(session({ ..., store: new Store(session)(config.session.options), }));
  3. 動的IMPORTの需要 動的IMPORTの需要 例2: 開発時のみ、開発支援モジュールを使いたい # config.yaml develop: true if (config.develop)

    { // プロファイラやらメモリリーク検出やら import "some-development-support-modules"; }
  4. DYNAMIC IMPORT 爆誕 DYNAMIC IMPORT 爆誕 ES2017の新機能 V8 ver6.3 /

    Chrome ver63 で実装 Node.js ver10でサポート?
  5. DYNAMIC IMPORT 爆誕 DYNAMIC IMPORT 爆誕 関数呼び出しスタイル Promiseを返す named importのみサポート

    import("foo") .then((foo) => { // ロード成功 ... }) .catch((err) => { // ロード失敗 ... });
  6. DYNAMIC IMPORT 爆誕 DYNAMIC IMPORT 爆誕 関数呼び出しスタイル Promiseを返す named importのみサポート

    // async/awaitもOK try { const foo = await import("foo"); ... } catch(err) { ... }
  7. DYNAMIC IMPORT 爆誕 DYNAMIC IMPORT 爆誕 セッションデータ保存先の指定例 import() がPromiseを返すので、少し複雑になる import

    session from "express-session"; const StorePromise = import(config.session.store); app.use((req, res, next) => { StorePromise .then((Store) => { const store = new Store.default(session); session({ ..., store: store(config.session.options), })(req, res, next); }) .catch(next); });
  8. 解決方法(?) 解決方法(?) クライアントサイドでの発生例 起点が Node.js起動後 ではなく ページロード後 ユーザ数が多いほど発生率が上がる SPAでは発生しやすい ページ滞在時間が長い(リロードしない)

    イベントが多い CDN上の古いモジュールをロードする可能性 $("#someButton").on("click", () => { // ページロード後、イベント発生前にモジュールが消えたらエラー! import("module")...; });
  9. 解決方法(!) 解決方法(!) dynamic importの存在意義って… ◎ Node.js起動時に動的ロード セッションデータ保存先の指定とか ◦ バッチ処理 実行タイミングがある程度決まっている

    △ あまりクリティカルでないページ エラーが出ても「ごめんね」で済むところ ? Electron…で使える? アップデート時に同じ問題が起きそう