react 代码分割 export && export default

代码分割

其实就是为了避免打包时候的代码体积过大而导致加载时间过长出现的一种优化手段吧.简单来说也就是引入并使用外部js文件的方法,使用代码分割有两种写法,推荐第二种.

第一种使用方式,调用import():

// 前提:我在math.js里面export了一个add函数
import("./math.js").then(math => {
  console.log(math.add(1, 2))  // 3
});

第二种使用方式,头部引入文件:

import { add } from './math'; 

//使用如下:
console.log(add(12, 12))  //24

这里踩到了一个坑,在math.js中导出函数时我写了export default,在外部调用的时候报错:math.add is not a function.

这就涉及到一个问题:export 和export default的区别
export:导出 ,在一个js文件里面可以多次使用,且可以导出多个函数,如:export {add,minus…}

export default:在一个js里面只能使用一次,就只能导出一个默认函数

导出方式不一样,引入方式也不一样:(不可混用!!!)

export default: import minus from './math.js'  // minus  可以自己修改命名

export: import {add} from './math.js';    // add是js内部的函数名称,不可修改

前者minus可以按照自己的意愿随便命名使用(不建议这么干),而后者花括号里面的内容必须要是引入文件内部存在的变量,名称不能随意改变 比如 里面存在的add函数;

使用export default 导出的函数,在import()中第一种使用方式为:

第二种使用方式(推荐):

import minus, { add } from './math'; 

// 使用
    console.log(add(12, 12));
    console.log(minus(8, 6))