前端首屏优化方案之一

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

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

模块太大，使用可能性低

模块的导入占用了大量系统内存

模块需要异步获取

导入模块时需要动态构建路径（路径拼接）import('./' + a + '.js')

模块中的代码需要程序触发了某些条件才运行（比如点击事件）

不能滥用动态导入：静态导入有利于初始化依赖，动态导入不能用于静态的程序分析和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返回值是Promiseconsole.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/脚手架（create react app）搭建的项目 → 可以直接使用import()
如果是手动做webpack的配置，查看代码分割指南
webpack动态导入
如果是用babel解析import() 需要安装依赖@babel/plugin-syntax-dynamic-import（在动态注册vue-router时，出现对import的语法错误，可能就是需要安装该依赖）

react中使用

对于动态import的内容，不会直接打包进main.js里；如果是静态导入的就会直接打包进一个js里

function Button() {// 函数里定义方法，要写关键字声明 和类不同const handleClick = async () => {// 若export default 接收到的就是default；否则接收到导出的const plus = await import('./index.js').then(res => res.default)// await + then 将res.default保存到resplus(1, 2)}return (<button onClick={handleClick}>getSum</button>)
}
ReactDOM.render(<Button />,document.getElementById('app')
)

13 代码分割之import静动态导入相关推荐

React开发（202）:react代码分割之import导入导出
React开发（207）:react代码分割之context的动态
python 运维包_基础入门_Python-模块和包.运维开发中__import__动态导入最佳实践?
常规导入:import module_name[,module1,...] from module_name import [*|child[,child1,...] from module_name ...
python type help copyright_Python关于import的实验(8)__init__.py文件内部代码的执行以及内部的导入和内部的变量...
Python官方文档参考链接: 常规包 Python 定义了两种类型的包,常规包和命名空间包. 常规包是传统的包类型,它们在 Python 3.2 及之前就已存在. 常规包通常以一个包含 __in ...
动态导入ECMAScript模块一文看懂
import { concat } from './concatModule'使用ES模块的方式是静态的:意味着模块之间的依赖关系在编译时就已经知道了. ECMAScript(又名ES2015或ES) ...
Webpack：代码分割
webpack 版本:4.35.0 webpack-cli 版本:3.3.5 为什么需要代码分割在当前的前端项目中,常常使用 gulp.webpack.Browserify 等将多个文件压缩合并成一 ...
动态化超详细完善的Excel动态导入Mysql，支持导入不同表,集成后只需配置就可以实现动态导入excel到数据库
文章目录项目开源代码项目开源代码 1.环境 gradle Maven 2.需要用到的mysql表导入数据存储日志信息表[pub_imp_excel_jd_log] 表信息[pub_imp_exc ...
【Webpack 性能优化系列(6) - code splitting 】通过代码分割来获取更小的 bundle，优化资源加载
webpack系列文章: [Webpack 性能优化系列(9) - 多进程打包]极大的提升项目打包构建速度!!! [Webpack 性能优化系列(8) - PWA]使用渐进式网络应用程序为我们的项目添 ...
【Gazebo入门教程】第三讲 SDF文件的静/动态编程建模
[Gazebo入门教程]第三讲 SDF文件的静/动态编程建模文章目录 [Gazebo入门教程]第三讲 SDF文件的静/动态编程建模一.自定义模型并导入Gazebo 1. 基础操作准备 2. 建立模 ...

13 代码分割之import静动态导入

react中使用

13 代码分割之import静动态导入相关推荐

最新文章

热门文章