组件库按需加载借助babel-plugin-import实现

zhichangterry 发布于2019-08-26 13:58 / 2656人阅读

摘要：对于大中型前端项目为了解耦与复用，更多的公司会选择自己封装组件库，那么一次引入整个组件库必然导致项目过大，如何按需加载则必须要做前世的插件原理项目地址在转码的时候，把整个库的引用，变为具体模块的引用。

对于大中型前端项目为了解耦与复用，更多的公司会选择自己封装组件库，那么一次引入整个组件库必然导致项目过大，如何按需加载则必须要做

前世 ant-design的babel插件babel-plugin-import

原理 [git项目地址](https://github.com/ant-design/babel-plugin-import)

在babel转码的时候，把整个库‘antd’的引用，变为"antd/lib/button"具体模块的引用。这样webpack收集依赖module就不是整个antd，而是里面的button.

import { Button } from "antd";
ReactDOM.render();

      ↓ ↓ ↓ ↓ ↓ ↓
      
var _button = require("antd/lib/button");
ReactDOM.render(<_button>xxxx);

今生

那么自然我们的组件也可以同样的处理，以anole-lego为例

配置 babel-loader

  // 编译添加
  include: [
    path.resolve(appDirectory, "node_modules/anole-lego"),
    //...others
  ]
  
  // 按需加载支持
  // npm/yarn 安装依赖 `babel-plugin-import` 详细参见该插件使用
  // 配置如下
  plugins: [
      ["import", {
        "libraryName": "anole-lego",
        // libraryDirectory: "lib",
        camel2DashComponentName: false, // 是否需要驼峰转短线
        camel2UnderlineComponentName: false, // 是否需要驼峰转下划线
        customName: (name) => {
          return `anole-lego/lib/components/${name}` // 核心配置 根据你自己的组件目录配置
        },
        style: () => {
          return false
        }
      }],
      //...others
    ]

使用

import { Button } from "anole-lego";
ReactDOM.render(, mountNode);

idc机房托管私有云按需加载按需加载javascript webpack按需加载实现加载动画

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

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

HeyUI组件库按需加载功能上线，盘点HeyUI组件库有哪些独特功能？

摘要：测试复制至剪切板的文本测试相关文档复制剪切板滚动至视图内其实，这是一个非常方便的功能，比如说，分页加载后滚动至头部，切换页面时切换至头部。HeyUI组件库如果你还不了解heyui组件库，欢迎来我们的官网或者github参观。官网 github 当然，如果能给我们一颗✨✨✨，那是最赞的了！按需加载当heyui组件库的组件越来越多的时候，按需加载的功能终于上线了。话不多说，先把按需...

IamDLY 2019-05-22 19:08 评论0 收藏0
webpack 性能提速

摘要：使用该插件带来的好处提升打包速度和项目体积将入口的文件中所有公共的代码提取出来，减少代码体积同时提升打包速度。利用缓存机制依赖的公共模块文件一般很少更改或者不会更改，这样独立模块文件提取出可以长期缓存。那么，下面就来开启正确的打开方式。按需引用外部的组件按需引用 2.启用happypack多核构建项目 3.修改source-map配置启用DllPlugin和DllReferen...

Reducto 2019-08-23 13:54 评论0 收藏0
webpack 性能提速

摘要：使用该插件带来的好处提升打包速度和项目体积将入口的文件中所有公共的代码提取出来，减少代码体积同时提升打包速度。利用缓存机制依赖的公共模块文件一般很少更改或者不会更改，这样独立模块文件提取出可以长期缓存。那么，下面就来开启正确的打开方式。按需引用外部的组件按需引用 2.启用happypack多核构建项目 3.修改source-map配置启用DllPlugin和DllReferen...

BWrong 2019-08-02 12:10 评论0 收藏0
webpack 性能提速

摘要：使用该插件带来的好处提升打包速度和项目体积将入口的文件中所有公共的代码提取出来，减少代码体积同时提升打包速度。利用缓存机制依赖的公共模块文件一般很少更改或者不会更改，这样独立模块文件提取出可以长期缓存。那么，下面就来开启正确的打开方式。按需引用外部的组件按需引用 2.启用happypack多核构建项目 3.修改source-map配置启用DllPlugin和DllReferen...

JouyPub 2019-08-29 17:29 评论0 收藏0
webpack 性能提速

摘要：使用该插件带来的好处提升打包速度和项目体积将入口的文件中所有公共的代码提取出来，减少代码体积同时提升打包速度。利用缓存机制依赖的公共模块文件一般很少更改或者不会更改，这样独立模块文件提取出可以长期缓存。那么，下面就来开启正确的打开方式。按需引用外部的组件按需引用 2.启用happypack多核构建项目 3.修改source-map配置启用DllPlugin和DllReferen...

mrcode 2019-08-05 15:41 评论0 收藏0