zoukankan      html  css  js  c++  java
  • antd按需加载

    antd简介

    antd 是蚂蚁金服推出的一套非常好的React UI库,使用起来特别方便,而且也推出了Antd手机端库,同时还推出了vue的使用方式

    • 如果没有按需加载,我们如果想要使用一个标签,比如Button,需要导入js和css文件,使用起来不是很方便,而且还会造成性能上面的一个下降,先来看一下正常版本的使用
    import React from 'react';
    import {
      Button
    } from 'antd';
    import "antd/dist/antd.css";
    
    function App() {
      return (
        <div className="App">
          123
          <Button>
            按钮
          </Button>
        </div>
      );
    }
    
    export default App;
    
    

    按需加载

    在antd的官网上我们看到了,他说需要babel-plugin-import,然后按照他的配置即可
    antd官网

    结果发现我的不好使!那么经过不断搜索和填坑,终于找到了好用的方式,一共有两种

    一. 暴露配置

    1. 按照需要的依赖
    yarn add babel-plugin-import --dev // 安装
    
    1. 在package.json中找到eject
     "scripts": {
        "eject": "react-scripts eject"
      }
    

    运行命令

    npm run eject
    

    注意: 此操作是不可逆的,他会暴露创建react时候的webpack的配置,而且这个命令只能在刚刚使用脚手架创建好项目之后运行(文件的结构不能发生改变的时候才能暴露)

    1. 修改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,
    },
    
    1. 重新运行一下项目,就可以直接引入组件了
    import { Button } from 'antd';
    

    这种方式必须暴露配置,这回让我们开发的时候不是很方便,所以推荐下面的这种方式

    二. (推荐)使用react-app-rewired

    1. 安装依赖
    npm i react-app-rewired@2.0.2-next.0 babel-plugin-import customize-cra
    

    这个时候就会有一个比较大的坑,react-app-rewired必须制定版本,否则报错

    1. 修改启动方式,在package.json中
      原版
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    

    修改后的版本

    "scripts": {
        "start": "react-app-rewired start",
        "build": "react-app-rewired build",
        "test": "react-app-rewired test",
        "eject": "react-app-rewired eject"
    },
    
    1. 在项目的根目录下创建config-overrides.js
    
    const {
      override,
      fixBabelImports,
      addLessLoader,
    } = require("customize-cra");
     
     
    module.exports = override(
      fixBabelImports("import", {
        libraryName: "antd", libraryDirectory: "es", style: true // change importing css to less
      }),
      addLessLoader({
        javascriptEnabled: true,
        modifyVars: { "@primary-color": "#1DA57A" }
      })
    );
    
    1. 重新启动项目,就可以按需加载了
    import { Button } from 'antd';
    

    总结

    使用react-app-rewired来代替react-scripts的启动方式,并且安装所需要的依赖,在根目录创建config-overrides.js文件,导入配置即可完成

    如果还有问题,可以看我的Demo合集

  • 相关阅读:
    RabbitMq的死信队列和延迟队列
    Rabbitmq的过期时间
    技术干货 | 源码解析 Github 上 14.1k Star 的 RocketMQ
    深入分析 Flutter 渲染性能
    重磅发布 阿里云数据中台全新产品DataTrust聚焦企业数据安全保障
    DataWorks搬站方案:Airflow作业迁移至DataWorks
    DataWorks搬站方案:Azkaban作业迁移至DataWorks
    基于 Flutter 的 Web 渲染引擎「北海」正式开源!
    走完线上 BUG 定位最后一公里
    10种编程语言实现Y组合子
  • 原文地址:https://www.cnblogs.com/sunhang32/p/12157990.html
Copyright © 2011-2022 走看看