实现antd的按需加载

0xE7A38A 发布于2019-08-23 12:02 / 585人阅读

摘要：使用来进行按需加载安装关于插件的介绍和使用，可参考使用这个插件之后仍然可以用来引入组件，但是这个时候插件会帮你转换成的写法。另外此插件配合属性可以做到模块样式的按需自动加载。

引言

create-react-app：是一个创建react项目特别方便的脚手架，他帮我们配置好了各种需要使用的工具，减少了很多工作量。

antd：是蚂蚁金服推出的一个很优秀的react UI库，其中包含了很多我们经常使用的组件，对于小白学习react来说十分友好！

当我们没有进行任何配置直接在这个项目中使用antd库时，会在控制台看到如下提示：

那么就有可能是使用了 import { Button } from "antd"; 的写法引入了 antd 下所有的模块，这会影响应用的网络性能，这时就体现了按需加载的重要性！

那么，如何实现按需加载呢？ 1. 单个组件分别引入对应的组件与样式

import Button from "antd/lib/button";  // 需要结构赋值的方式引入
import "antd/lib/button/style"; // 或者 antd/lib/button/style/css 加载 css 文件

这个方法的优点是比较简单，不需再次配置，直接加载即可，但是比较麻烦，每次载入一个新的组件都需要先载入组件，在加载组件的css文件，代码冗余。

2. 使用 babel-plugin-import 来进行按需加载

yarn add babel-plugin-import --dev     // 安装

关于插件的介绍和使用，可参考：https://blog.csdn.net/qq_3580...

使用这个插件之后仍然可以用：import { Button } from "antd";来引入组件，但是这个时候插件会帮你转换成 antd/lib/xxx 的写法。另外此插件配合 style 属性可以做到模块样式的按需自动加载。这个时候问题来了，通过create-react-app来创建的react项目的webpack是封装后的，在项目中是隐藏的，如何修改其配置呢？

下面介绍两种比较常用的方法：

yarn eject

使用 react-app-rewired

yarn eject: 1. 在使用create-react-app创建项目之后，在package.json中有一个命令：

 "scripts": {
    "eject": "react-scripts eject"
  }

2. 执行yarn eject命令后会在主目录下生成一个config文件夹,内容就是相关的配置文档。

在执行完yarn eject之后，会将项目中所有的配置项反编译出来，就可以认开发者任意修改配置项，但是这个过程是不可逆的，一旦执行，就不能恢复，再也不能通过升级其中的react-scripts包来升级create-react-app的特性。

3. 修改webpack.config.dev（开发环境）和webpack.config.prod（构建环境）下的 Process JS with Babel.下的那个options为：

options: {
             plugins: [
               ["import",[{  // 导入一个插件
                 libraryName: "antd",   // 暴露的库名
                 style: true // 直接将ants样式文件动态编译成行内样式插入，就不需要每次都导入
               }]]
             ],
             cacheDirectory: true,
           },

和

options: {
              plugins: [
                ["import",[{  // 导入一个插件
                  libraryName: "antd",   // 暴露的库名
                  style: true // 直接将ants样式文件动态编译成行内样式插入，就不需要每次都导入
                }]]
              ],
              compact: true,
            },

4. 使用组件：

import { Button } from "antd";

使用 react-app-rewired 1. 安装react-app-rewired：

yarn add react-app-rewired --dev

2. 修改package.json:

/* package.json 的配置需要做如下修改*/
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
}

3. 然后在项目的根目录下创建一个 config-overrides.js 用于修改默认配置:

const {injectBabelPlugin} = require("react-app-rewired");
module.exports = function override(config, env) {
  config = injectBabelPlugin(["import", {libraryName: "antd", style: "css"}], config);
  return config;
};

4. 使用组件：

import { Button } from "antd";

总结

关于antd的按需加载其实还有其他的方法，本文只介绍了两种比较常用的配置方法，比如替换 react-scripts 包法和scripts 包 + override 组合法，具体可以参考大佬的文章：https://zhaozhiming.github.io...

超融合服务器私有云按需加载按需加载javascript webpack按需加载实现加载动画

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97867.html

实现element-ui的按需引入，按需打包加载

摘要：简单说明原理使用实现按需引入打包。这里采用多入口配置，实现各个功能模块分别打包成一个文件，并使用将样式进行抽离后，按入口进行打包为对应的文件。只要在指定入口名为。这个相关配置已经发布了包。简单说明原理：使用babel-plugin-component实现按需引入、打包。将webpack配置成多入口，保证最终打包的目录结构符合babel-plugin-component插件的要求，实...

TesterHome 2019-08-23 10:41 评论0 收藏0
使用less-loader与antd按需加载(babel-plugin-import)的坑

摘要：的按需加载设置安装插件修改或新建文件进行编辑，但两者只能存一种根据配置更改主题颜色在中找到原配置注释后更改为定义全局样式配置自定义主题只需修改的颜色，再重启项目即可更改主题颜色为了在react中使用antd以及它的主题更改，需要在项目中 yarn eject 暴露出webpack文件进行改造本答案是在日期当时最新的create-react-app上的webpack版本 less-l...

Eminjannn 2019-08-26 14:00 评论0 收藏0
记一次 webpack 打包体积优化

摘要：手头做的项目开发得差不多了，而打包配置是一开始粗略配置的，不大的项目打包出来得，所以现在必须进行优化。用于生产环境的打包，设置其为后，这些库会提供最小体积的文件。这种情况打包后的体积要更小一些。最后打包结果的体积开销主要就是以上几项。手头做的项目开发得差不多了，而打包配置是一开始粗略配置的，不大的项目打包出来得6MB+，所以现在必须进行优化。打包结果分析执行命令 webpack ...

tomlingtm 2019-08-26 11:47 评论0 收藏0
webpack4大结局：加入腾讯IM配置策略，实现前端工程化环境极致优化

摘要：或者的，都会对其进行分析。舒适的开发体验，有助于提高我们的开发效率，优化开发体验也至关重要组件热刷新热刷新自从推出热刷新后，前端开发者在开环境下体验大幅提高。实现热调试后，调试流程大幅缩短，和普通非直出模式调试体验保持一致。 showImg(https://segmentfault.com/img/bVbtOR3?w=1177&h=635); webpack，打包所有的资源不知道不...

李增田 2019-08-30 11:09 评论0 收藏0