Webpack 生产环境性能优化之加载优化

概述

---

针对不同的优化场景，一个文件的加载时机可能会大有不同。根据文件的加载时机，可以分为三种加载方式：

正常加载：并行加载，同一个时间加载多个文件；

懒加载: 当文件需要使用时才加载；

预加载 prefech：会在使用之前，提前加载 js 文件。但这个 js 文件需要等其他资源加载完毕，浏览器空闲了才会去加载这个 js 文件；

而在实际开发中，我们通常会面临这样一个需求：首屏加载优化。尤其对于 C 端项目来说，首屏加载速度是最重要的的性能指标之一，而提升加载速度的方法有很多，懒加载和预加载就是我们经常使用的办法。接下里我们就来讲讲如何在项目中使用懒加载和预加载。

方案实现细节

---

首先，我们需要使用动态导入的方式引入相应模块：

// 代码所在文件：index.js

import(/* webpackChunkName: 'print' */'./js/print')

    .then((res) => {

        console.log(res);

    })

    .catch(() => {

        console.error('print.js 加载失败');

    });

当我们使用 webpack 进行打包后，就会生成两个 chunk。而 print.js  对应的 chunk 文件只会在上面这段代码被真正执行的时候（比如说这段代码是放在事件处理函数中，那么只有在事件触发的时候才会被执行到），才会被真正加载。

上面这种方式会产生一个小问题；在第一次触发事件处理函数之前，我们需要花费一定的时间来加载 js 文件，如果文件很大，显然会影响到用户体验。针对这个问题，我们可以使用预加载的方式来进行进一步优化！webpack 可以比便捷的生成预加载的 chunk，具体配置如下：

// 代码所在文件：index.js

import(/* webpackChunkName: 'print', webpackPrefetch: true */'./js/print')

    .then((res) => {

        console.log(res);

    })

    .catch(() => {

        console.error('print.js 加载失败');

    });

结语

---

预加载目前只能在 PC 端一些高版本的浏览器中使用，在移动端会有相当大的兼容性问题，所以在实际项目中，我们还是建议使用懒加载。