require和import有啥區別？

今天在研究react的lazyRequire時突然想到了這個問題，於是展開了一些列研究。。

要回答這個問題，必須從模組化說起。

所謂模組化主要就是解決程式碼分割、作用域隔離、模組之間的依賴管理。

通常一個檔案就是一個模組，有自己的作用域，只向外暴露特定的變數和函式。

流行的模組化規範有：CommonJS、AMD、CMD、ES6的模組系統。
這裡簡單介紹下CommonJS規範和ES6 Module。

1. CommonJS

使用module.exports定義當前模組對外輸出的介面，用require載入模組。

2. ES6 Module

其模組功能主要由兩個命令構成：export和import。
export用於規定模組的對外介面；import用於輸入其他模組提供的功能。

3. 兩者區別

CommonJS模組輸出的是一個值的拷貝，ES6模組輸出的是值的引用。

也就是說，在CommonJS模組中，一旦輸出一個值，模組內部的變化就影響不到這個值；而ES6輸出的是值的引用，export之後，內部對這個值進行修改，最終export的是修改過的值。

CommonJS模組是執行時載入，ES6模組是編譯時載入。

兩者各有用武之地：

• 可以利用require做懶載入
• 而import是在編譯時載入。可以只載入用到的介面，而require會把所有export的介面都載入。
  如果大家對“編譯”有疑惑，請看如下連結和微信聊天截圖：
• 《不是說js不需要編譯嗎，那‘ES6模組是編譯時載入’是什麼意思》
• 微信聊天截圖
  

4.參考

https://juejin.im/post/5aaa37c8f265da23945f365c
https://imweb.io/topic/582293894067ce9726778be9
https://www.cnblogs.com/cag2050/p/7419258.html
http://es6.ruanyifeng.com/#docs/module