在 Webpack4 中使用 Babel-plugin-syntax-dynamic-import

在 Webpack 4 中使用 Babel-plugin-syntax-dynamic-import

介绍

随着前端单页面应用的流行，动态导入代码成为了一种常见的方式，可以大幅度减小首次加载的 JavaScript 体积，并提升应用的响应速度。Webpack 4+ 中 Babel-plugin-syntax-dynamic-import 成为了解决方案之一。

Babel-plugin-syntax-dynamic-import 是 Babel 的一个插件，主要作用是让 Babel 认识 import() 语法，使得开发者可以在代码中使用动态导入。

使用

安装

在开始之前，先安装一下 Babel-plugin-syntax-dynamic-import：

npm install @babel/plugin-syntax-dynamic-import

配置

Webpack 4 自带了 babel-loader，只需要在 Webpack 配置文件中的 module.rules 中加上以下代码：

// javascriptcn.com 代码示例
{
  test: /\.js$/,
  exclude: /node_modules/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env'],
      plugins: ['@babel/plugin-syntax-dynamic-import']
    }
  }
}

使用

在 JavaScript 中使用 import() 语法即可动态导入模块：

import('./path/to/module.js')
  .then(module => {
    // 模块已经加载完成
  })
  .catch(error => {
    // 模块加载失败
  });

这里要注意的是，动态导入返回一个 Promise，成功的回调函数中返回的是动态导入的模块，失败的回调函数中返回的是错误信息。

示例代码

以下是一个简单的 Webpack 配置文件和一个示例 JavaScript 文件：

webpack.config.js

// javascriptcn.com 代码示例
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-syntax-dynamic-import']
          }
        }
      }
    ]
  }
};

src/index.js

// javascriptcn.com 代码示例
const load = () => {
  console.log('模块加载成功');
};

import('path/to/module.js')
  .then(load)
  .catch(error => {
    console.log(error);
  });

运行 Webpack 打包后，会在 dist 目录下生成一个 bundle.js 文件。在浏览器中打开 index.html 文件即可看到模块加载成功的信息。

总结

Babel-plugin-syntax-dynamic-import 是一个非常实用的插件，可以让我们在 Webpack 4 中使用动态导入。动态导入可以大幅度减小应用加载时间，提升用户体验，是我们开发前端单页面应用不可或缺的一部分。

当然，动态导入并不是万能的，它对应用的响应速度有一定的帮助，但并不能解决所有性能问题。我们需要根据具体的业务场景，综合考虑各种因素来进行性能优化。

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