首屏优化之：import 动态导入

前言

前面我们聊过可以通过不太的 script 属性比如 defer，async 来实现不同的加载效果，从而实现首屏优化，没看的朋友可以看一下：。

今天我们来聊一下动态导入之 import，当然 import 动态导入也不是一把梭的，也是需要根据项目情况进行使用，在面试以及实际工作当中都可以用到，一起来看看吧！

在了解动态导入之前，我们先来看一下什么是静态导入。 

静态导入

静态导入会在编译时解析所有导入的模块，并在程序开始执行之前加载它们。这意味着所有被导入的模块在应用启动时就已经加载完毕。

什么意思，我们先来看一下下面这段代码：

这段代码很简单，我在页面导入了 import.js，当点击按钮时打印输出语句。

我们来看一下浏览器初始化加载情况：

很明显，程序开始执行之前，import.js 就被加载了。

但是在某些时刻，我们不希望文件在没有被使用时就被加载，只希望在使用时加载，可以优化首屏的加载速度，这些时刻我们就可以使用动态导入。

动态导入

动态导入是一种在代码执行时按需加载模块的技术，而不是在应用程序初始化时加载所有模块。

默认不会一上来加载所有文件，只会在用到时加载，这样可以优化初始加载时间，提升页面响应速度。

动态导入与静态导入不同，动态导入使用 ES6 中的 import() 语法，可以在函数或代码块中调用，从而实现条件加载、按需加载或延迟加载。例如：

import('./import.js')

 还是上面的代码，我们使用动态导入来进行实现一下：

我们再来看一下浏览器的加载情况：

可以看到并没有加载 import.js

当点击按钮时，才加载了 import.js 文件，这就说明import导入的文件不会一上来就直接被加载，而是在相关代码被执行时才进行加载的。

 一些应用

路由懒加载

在 react 中我们常常使用 lazy 和 Suspense 来实现路由的懒加载，这样做的好处就是初始化时不会一下加载所有的页面，而是当切换到相应页面时才会加载相应的页面，例如：

组件动态导入

 对于一些不常用或者不需要直接加载的组件我们也可以采用动态导入，比如弹出框。

我们只需要在点击时进行加载显示即可。

 分包优化

这里就简单说一下分包的优化，webpack 默认的分包规则有以下三点：

1. 通过配置多个入口 entry，可以将不同的文件分开打包。
2. 使用 import() 语法，Webpack 会自动将动态导入的模块放到单独的包中。‘
3. entry.runtime 单独组织成一个 chunk。

根据第二点，被动态导入的文件会被单独进行打包，不会被分包进同一个文件，也就不会在初始加载 bundle.js 时被一起进行加载。

通过将代码分割成多个小包，可以在用户需要时才加载特定的模块，从而显著减少初始加载的时间。

总结

在进行首屏优化时，可以采取动态导入的方式实现，使用 import('./文件路径')实现，虽然动态导入有一些优化首屏渲染的优势，但是也有一些缺点，比如首次加载延迟，不利于 SEO 优化等，所以在使用动态导入时应该好好进行规划，比如一些不常用的模块或者内容不太复杂，对加载速度无要求的文件可以进行动态导入，这个还是要根据项目的需求来进行使用的。