代码分割之import静动态导入

前端首屏优化方案之一

项目构建时会整体打包成一个bundle的JS文件，而有的代码、模块是加载时不需要的，需要分割出来单独形成一个文件块chunk（不会打包在main里），让模块懒加载（想加载时才加载），以减少应用体积、减少加载时的体积。

1. import是关键字而非函数（类比typeof，typeof '123’ or typeof('123')）
2. 静态导入： import xxx from ''，导入并加载时，导入的模块会被编译，不是按需编译
3. 动态导入：import('') 根据条件或按需的模块导入
4. 动态导入应用场景：

• 模块太大，使用可能性低
• 模块的导入占用了大量系统内存
• 模块需要异步获取
• 导入模块时需要动态构建路径（路径拼接）import('./' + a + '.js')
• 模块中的代码需要程序触发了某些条件才运行（比如点击事件）

5. 不能滥用动态导入：静态导入有利于初始化依赖，动态导入不能用于静态的程序分析和tree shaking

// module.js
export default class MyTest {
     
    construct() {
     
        console.log('构造器')
    }
}

<template>
  <div>
    <button class="test" @click="clickBtn">查看</button>
  </div>
</template>

<script>
export default {
     
  name: "Plan",
  methods: {
     
    async clickBtn() {
     
      const res = await import("../libs/module.js");
      // import返回值是Promise
      console.log("res", res);
      let myTest = res.default;
      new myTest();
    },
  },
};
</script>

// module.js
export const plus = (a, b) => {
     
    return a + b
}

<script>
export default {
     
  name: "Plan",
  methods: {
     
    async clickBtn() {
     
      import("../libs/module.js").then((res) => {
     
        const {
      plus } = res;
        console.log("plus 1 + 2 =", plus(1, 2)); // 3
      });
    },
  },
};
</script>

• 如果使用vite搭建的项目 → 可以直接使用import()
• 如果是手动做webpack的配置，查看代码分割指南
  webpack动态导入
• 如果是用babel解析import() 需要安装依赖@babel/plugin-syntax-dynamic-import（在动态注册vue-router时，出现对import的语法错误，可能就是需要安装该依赖）