使用ES6 Module如何處理模塊按需載入 (lazyload)？

01-04

ES6 module（import/export 語句）是靜態的，所以無法用於按需載入。

但有一份新的規範提案 dynamic import（tc39/proposal-dynamic-import）可用於動態載入。該提案已經達到 stage 3，有望在明年進入標準。

babel已經支持解析該語法：Syntax Dynamic Import，不過要在生產環境用還需要配置其他插件。

以下為瀏覽器的實現情況：

Safari: Implement dynamic-import for WebCore

Chrome: 711706 - Implement dynamic import - chromium - Monorail

Firefox: 1342012 - Implement the dynamic import() proposal

WebKit早在1月份就已經實現了！我在WebKit Nightly Build里測試通過。之所以可以這麼快，是因為WebKit已經實現了&

最後提一點，import() 並不限定必須在&

去除冗餘代碼有人提到了treeshaking，可以去掉沒有被調用的代碼。如果是對Es6 模塊優化建議你看下https://zhuanlan.zhihu.com/p/25012345 本地緩存+線上combo 增加不同模塊間復用效率不改變書寫模式的前提下優化載入性能

等新規範吧，不過也就是給個 tag 然後動態載入，webpack2 的 import 用起很方便的，以前 System.js 的也有。

就目前來說 ES6 module 還做不到按需載入， ES6 的 import 語句必須放在文件的最上層，而且 import 的文件會一次全部載入進來。

不過你可以使用https://github.com/ModuleLoader/es-module-loader

目前ES6還不能實現按需載入，不過已經有一份提案使用import()，未來可能會支持。現在你可以使用babel對它轉碼，或者直接用require。

兄弟，別糾結，動態請使用 let xx = require("xx").default 即可