Webpack 实现 code splitting 与懒加载-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，随着项目的复杂度增加，前端资源的体积也不断增大，这就导致了网页加载速度缓慢，用户体验不佳的问题。为了解决这个问题，我们可以采用 Webpack 的 code splitting 和懒加载机制来优化前端资源的加载。

什么是 code splitting

code splitting 又称为代码分离，是指将应用程序代码分割成多个小的代码块，然后按需加载这些小的代码块。这样做的好处是可以将不同的模块按照业务逻辑和功能进行分组，减小了每个页面的加载速度，提升了用户体验。

code splitting 实现方法

Webpack 具有自带的 code splitting 功能，我们只需要按照下面的步骤进行配置即可。

使用 ES6 的 import() 语法

ES6 中的 import() 语法可以实现动态加载模块，会自动将模块分割成小的文件块。我们可以将一个大模块分割成多个小模块，在需要时再按需加载使用。

例如，在原本的代码中：

import moduleA from './moduleA.js';
import moduleB from './moduleB.js';
import moduleC from './moduleC.js';

// 使用 moduleA, moduleB 和 moduleC

我们可以将这些模块分割为三个独立的代码块，并在需要时使用 import() 加载：

// 新的代码
async function fn() {
  const { default: moduleA } = await import('./moduleA.js');
  const { default: moduleB } = await import('./moduleB.js');
  const { default: moduleC } = await import('./moduleC.js');

  // 使用 moduleA, moduleB 和 moduleC
}

其中 import() 方法会返回一个 promise 对象，通过 await 关键字等待 promise 对象的状态修改为 resolved 后，就可以使用模块加载后的对象。

使用 splitChunksPlugin 插件

我们还可以使用 splitChunksPlugin 插件来实现 code splitting，该插件可以自动将重复代码提取出来，形成一个通用的代码块，其他代码可以使用这个通用的代码块，避免了冗余代码的加载。

例如，我们可以添加下面的配置：

// javascriptcn.com 代码示例
module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 20000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      automaticNameDelimiter: '~',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
};

其中，chunks 参数表示要分离哪些模块，'all' 表示分离所有模块。而其它参数则分别表示了分块的策略和一些参数设置。

使用 webpackPrefetch 预加载

还有一种方式可以使用 webpackPrefetch 实现代码按需加载，可以让浏览器在闲置时间预加载一些代码块，提高后续访问时的速度。

例如，我们假设有一个组件，只有在用户进行某些操作时才会加载，我们可以使用下面的代码在组件加载前进行预加载：

const Component = () => import(/* webpackPrefetch: true */ './Component.vue');

其中，webpackPrefetch 用来告诉 Webpack 进行预加载。

懒加载实现方法

懒加载也称为延迟加载，是指仅在需要的时候才加载模块。懒加载有利于提高初始加载速度，同时也能避免加载无用的模块，减少资源浪费。

在 Webpack 中，可以使用动态 import() 的方式实现懒加载：

const moduleA = () => import('./moduleA.js');
const moduleB = () => import('./moduleB.js');

在使用时，需要等待 promise 对象的状态变为 resolved 后使用：

async function fn() {
  const { default: moduleA } = await moduleA();
  const { default: moduleB } = await moduleB();

  // 使用 moduleA 和 moduleB 模块
}

总结

通过以上几种方法，我们可以有效地实现前端资源的 code splitting 和懒加载，从而提升网页加载速度，提供更好的用户体验。在实际开发中，我们可以根据具体的业务需求和前端性能优化建议来选择合适的方案。

示例代码

下面是一个使用 ES6 import() 实现的懒加载代码示例：

// javascriptcn.com 代码示例
class App {
  async handleBtnClick() {
    const { default: moduleA } = await import('./moduleA.js');
    const { default: moduleB } = await import('./moduleB.js');
    const { default: moduleC } = await import('./moduleC.js');

    new moduleA();
    new moduleB();
    new moduleC();
  }
}

new App();

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654703607d4982a6eb167b3e