export function error (*code* = 404) {
	return import(
	
	*/* webpackChunkName: "error-[request]" */*
	
	`@/views/${*code*}.vue`
	
	)
}

こんなコードに出会した

import(~)

はダイナミックimportの記法で、それをwebpackで使用した場合の話

チャンクとは？

大きなデータを分割して制御情報を付加したひとまとまりの断片

Dynamic Import

import a from "./a" は必ずトップレベルでの宣言が必須で、静的に解決されるが、

ESM の import("...") 関数は、スクリプトの評価時に読み込まれる。これによって、必要になるまで評価を遅延することが可能。

if(USE_LIB) { const a = await import("./a"); // default を自動解決できないことに注意 a.default(); }

Webpack 環境下での Dynamic Import

↑ というのがネイティブブラウザでの挙動だが、 webpack 環境下では複雑な動きをする。

• output.path に複数のJSチャンクを吐く。
  • 仮に main.js, chunk.a.js
  • main.js で import('./a') が評価されると、 output.publicPath から相対パスで chunk.a.js をダウンロードして、eval する。
  • XHR で取得するので、Dynamic Import 未対応のIEでも動く(が、IE以外では大抵サポート済みで…)

詳しいドキュメントは https://webpack.js.org/guides/code-splitting/ にて

TypeScript 環境で dynamic import を使うには、 "module": "esnext" の指定が必要。そうでない場合は インラインの require にコンパイルされ、分割されない。