export&&import;静态加载&&动态加载；路由懒加载等模块相关知识点

静态加载

ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。

注意：CommonJS 是运行时加载。

export

• 基本语法

  • // 写法1:
    export var firstName = 'Michael'; 
    export function fn(x, y) {
      return x * y;
    };
    ​
    // 写法2：(推荐，更直观)
    var lastName = 'Jackson';
    var firstName = 'Michael'; 
    export function fn1(x, y) {
      return x * y;
    };
    export function fn2(x, y) {
      return x * y;
    };
    export { firstName, lastName, year,fn1,fn2 };
    

    注意：

    0. 导出的为变量不是值。

       // 报错
       var m = 1;
       export m; // 相当于导出1,正确看上述写法1和2
       

    1. 导出的值与出处的值是动态绑定的。即出处的文件的值变了，导出的值也会变。

    2. 只能处于模块顶层，因为静态加载的，先于代码执行。

• 重命名

  • let a = 1
    function v2(){
        ...
    }
    ​
    export { a as b, v2 as streamV2 };
    

import

• 基本语法

  • import { firstName } from './profile.js';
    ​
    import 'lodash';  // 执行整个模块。
    

    注意：

    0. 导入的值都为只读。但是如果是对象，又可以修改其属性值，修改后其他模块也能读取到该属性值。（极不推荐，难维护）
    1. import具有变量提升效果。
    2. 不能使用变量和表达式，因为是静态加载，编译时加载。语法等要运行时才有。

• 重命名

  • import { firstName as surname } from './profile.js';
    

• 整体加载

  • export function fn(){}
    ​
    import * as circle from './circle';  // 整体加载到对象上
    circle.fn()
    

export default

原理是简写

// 第一组
export default function crc32() { 
  // ...
}
import crc32 from 'crc32'; // 此处是对默认导出的函数重命名了，不是匿名函数也当匿名函数来重命名。
​
// 第二组
export function crc32() { 
  // ...
};
import {crc32} from 'crc32'; 
​
// 第一组相当于
function add(x, y) {
  return x * y;
}
export {add as default};
​
import { default as foo } from 'modules'; // 简写default即为第一组

注意：

1. 因为export default命令其实只是输出一个叫做default的变量，所以它后面不能跟变量声明语句。

   export var a = 1; // 正确
   ​
   var a = 1;
   export default a; // 正确
   ​
   export default var a = 1; // 错误
   ​
   export default 42; // 正确，可以理解为对外接口为default变量。
   

2. default和import(引入default内容)只能存在一个。

动态加载

import()函数（ES2020）

import(specifier) // import 能接受什么参数，import就能接受什么参数。
例如：const widget = import('./widget.js')
​
// import()返回promise对象,为异步加载。require()为同步加载
import().then(res=>{}) 
​
​
// import()加载模块成功以后，这个模块会作为一个对象，当作then方法的参数。
import().then({res}=>{}) 
// 若为default，则直接获取即可。
import().then(default=>{}) 

vue router 路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

// 使用了import()即会自动异步加载、也就是按需加载。webpack会自动处理。
const router = new VueRouter({
  routes: [{ path: '/foo', component:  () => import('./Foo.vue') }]
})

参考链接

es6.ruanyifeng.com/#docs/modul…

v3.router.vuejs.org/zh/guide/ad…