[webpack] 使用 babel-plugin-import 优化 antd

在前端开发中，组件库是必不可少的。antd 是一款比较受欢迎的 React UI 组件库，但是默认情况下，它会将整个库中所有的组件都打包进去，这样会导致最终生成的 JS 文件变得非常大。为此，我们可以使用 webpack 和 babel-plugin-import 来按需引入组件，从而优化打包文件。

减小打包文件大小

首先，我们需要说明为什么需要减小打包文件大小。当一个项目中的打包文件过大时，加载网页会变得非常缓慢，影响用户体验。同时，打包文件大还会占用用户的网络资源，增加页面加载时间，对于用户而言十分不友好。

按需引入 antd 组件

接下来是如何使用 webpack 和 babel-plugin-import 来实现按需引入 antd 组件。在 webpack.config.js 文件中，添加如下代码：

module.exports = {
  // 其他配置...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env", "@babel/preset-react"],
          plugins: [
            [
              "import",
              { libraryName: "antd", libraryDirectory: "es", style: true },
            ],
          ],
        },
      },
    ],
  },
};

其中，"libraryName: 'antd'" 表示需要按需引入的组件库为 antd，"libraryDirectory: 'es'" 表示按需引入的组件库在 node_modules/antd/es 目录下，"style: true" 表示需要打包 antd 的样式文件。

接下来就可以愉快地按需引入组件啦。例如，如果你要使用 antd 的 Button 组件，只需要这样写：

import { Button } from "antd";

按需引入样式

在上面的配置中，我们设置了"style: true"，表示需要打包 antd 的样式文件。不过，这种方式会导致所有的样式都被打包进去，最终生成的 CSS 文件过大。因此，我们还可以使用 babel-plugin-import 来按需引入样式。

在 webpack.config.js 文件中，修改如下代码：

module.exports = {
  // 其他配置...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env", "@babel/preset-react"],
          plugins: [
            [
              "import",
              {
                libraryName: "antd",
                libraryDirectory: "es",
                style: true,
                // 针对 less 文件，自动转换为 css 文件
                transformToDefaultImport: false,
              },
              "antd",
            ],
          ],
        },
      },
    ],
  },
};

其中，新增了一个参数"transformToDefaultImport: false"，表示将 less 文件转换为 css 文件，并按需引入。这样就可以避免打包所有的样式文件，从而减小生成的 CSS 文件大小。

总结

本文介绍了如何使用 webpack 和 babel-plugin-import 来优化 antd 的按需引入，以及如何按需引入样式。当项目中有大量的组件需要引入时，按需引入可以显著减小打包文件大小，提高用户体验和页面加载速度。

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