require vs import

import和require就是兩種不一樣的JS模塊化實現方式而已，因爲以前npm生態的不少包都是基礎CommonJS規範寫的，因此至關一段時間以內必然是import和require這兩種模塊引入方式共存的。

• import是編譯時加載，必須放在模塊頂部，在性能上會比後者好一些，require是運行時加載，理論上來講放在哪裏均可以
• import採用的是實時綁定方式，即導入和導出的值都指向同一個內存地址，因此導入值會隨着導出值變化。而require在導出時是指拷貝，就算導出的值變化了，導入的值也不會變化，若是想要更新值就要從新導入
• es6的export命令規定的是對外的接口，必須與模塊內部的變量創建一一對應關係。能夠理解爲export導出的是一種引用關係而不是一個具體的值，它們的實質是，在接口名與模塊內部變量之間，創建了一一對應的關係. 

//會報錯
export 1;
var m = 1;
export m;


//以對象的方式導出 就正常
var m = 1;
export { m }

//require就比較簡單了，導入是什麼 導出就是什麼
// test.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
module.exports = { firstName, lastName, year };

// demo.js
const test = require('./test.js');
console.log(test); // {firstName: "Michael", lastName: "Jackson", year: 1958}

• 特別說明一下，因爲require是能夠在任意地方引入的，因此，咱們在開發中用~引入圖片的方式實際上等效於require:

<img src="~assets/img/icon/red_logo.png" class="logo" alt="">
//等效於
<img :src="require('assets/img/icon/red_logo.png')" class="logo" alt="">

 

 

-----------------
require是commonjs的語法 。 路由文件裏，在開發環境裏經過這種方式加載的是同步，不會影響熱更新。

import是es6的語法。  import的是異步，以這種方式調用，將返回一個 promise。  

import('/modules/my-module.js')
  .then((module) => {
    // Do something with the module.
  });