Nic Lin's Blog

喜歡在地上打滾的 Rails Developer

JavaScript 中 require, import 的差別及效能

簡單說差別:import 是編譯中執行,CommonJS 的 require 是同步加載

import 無論在 node 或是瀏覽器都不能直接使用,透過 Babel 轉譯後還是使用 CommonJS 加載,所以兩者其實透過轉譯後是一樣的,只是遵循的規範及出現的時間點不同而已。

在效能上基本上沒區別,因為轉譯過後還是一樣的東西。

require / exports 出生在野生規範,也就是 JavaScript 社群開發者自己草擬的規則,得到了大家的廣泛應用。

現在大家比較常接觸的 import / export 則是所謂的名門正派,跟隨著新的 ECMAScript 版本,也就是大家常聽到的 ES5 / ES6 。

在 JavaScript 引擎還不支援 ES6 的情況下,只能用 webpacker + babel 轉譯,這時候 require / exports 依舊是必須使用的,因為 babel 最後將轉成瀏覽器能懂得 CommonJS,所以也就是如果你寫了 import 最後還是會被轉成 require 的。

不過以 require / exports 來說,只有簡單的寫法

const component = require('component')
exports.component = component
module.exports = component

而 import/export 的寫法就很多樣了

import fs from 'fs'
import { default as fs } from 'fs'
import * as fs from 'fs'
import { readFile} from 'fs'
import { readFile as read } from 'fs'
import fs, { readFile } from 'fs'

export default fs
export const fs
export function readFile
export { readFile, read }
export * from 'fs'

import 屬於靜態編譯,所以沒辦法動態加載,但 require 就可以了

const url = "a" + "b"

import url // => 噴錯
require(url) //=> OK

雖然在 node 9 以上版本就可以使用 ES6 了,但是還是需要設定一些東西,避免麻煩,大家多半還是用 webpacker + babel 解決。

小結

  • 基本上現在能用 ES6 寫 import 就用吧。
  • 有用 webpacker / babel 的話,不用在意 import 與 require 的效能,因為最後都會轉為 CommonJS
  • 需要動態加載時才使用 require

參考資源

comments powered by Disqus