2016の二十三日目の記事である。今年......2016年はHTTP/2が大いなる躍進を遂げた年であったと感じる。Availability)。ServerなどのHTTP/2に対応したHTTPサーバーをフロントとして自身で運用しなければならなかった。サービスの恩恵を享受できず、また運用の手間をかける必要もあった。多くのCDNサービスがHTTP/2に対応したため、手間をかけることなく誰もがHTTP/2の恩恵を気軽に享受できるようになった。今後HTTP/2で配信されるウェブページが増えていくことであろう。HTTP/2が策定される以前のHTTPの規格であるHTTP/1.1では同一のホスト名に対して同時にリクエストできる数には制限がある。そのため、複数のスクリプトファイルが埋め込まれたウェブページはページ全体の読み込みが完了するまでに時間がかかってしまっていた。それを解決するために複数のスクリプトファイルをwebpackやBrowserifyといったバンドルツールを用いて結合させるといったことが、半ば当たり前のこととなっていた。HTTP/2ではリクエストとレスポンスのストリームが多重化されている。並列して複数のリクエストを送信できるようになったため、これまで当たり前のことであったスクリプトファイルの結合の必要性は薄くなった。}}main();のようにimport()で別のスクリプトファイルを指定すると実行時にそのスクリプトファイルが読み込まれるようになる。Functionsとの相性が極めて良い。3であり、正式な仕様となっているものではない。実装されているウェブブラウザーもまだ存在していない。使うことによって、期待するような効果が得られる。webpack単体でもimport()に対応しているが、Babelも一緒に使うのであればBabelで処理させるためにbabel-plugin-syntax-dynamic-importというBabelのプラグインを導入させなければならない。BabelはCommonJSに対応していないので、webpackから読み込んでも実体はそのまま返されない。import('./components/App)).defaultのような形で呼び出さなければならず、いささか煩雑である。babel-plugin-add-module-exportsを使うことによって解決できる。babel-plugin-add-module-exportsはその名前の通り、module.exportsを追加するBabelのプラグインである。これによりwebpackの想定するCommonJSに対応する形へのトランスパイルが可能となる。書いたコードの全体はykzts-sandbox/try-dynamic-importにある。MITライセンスで公開しているので自由に使ってもらって構わない。今後、HTTP/2での通信はより一般的なものになっていくと予想される。HTTP/1.1時代の常識のままでいては良くないだろう。フロントエンドに携わるソフトウェア開発者でも、HTTPについてある程度の知識と理解を持ち、よりユーザーの方向を向いた適切な開発を心がけて行きたい。receiver」を作っているピクシブ株式会社を退職しますkeyboard_arrow_right運営者情報プライバシーポリシ。