十分钟笔记分享：按需加载

近期和一些朋友交谈，发现似乎他们对这块知识有些模糊，故在此简单梳理分享一下

我比较认同侯策大佬对于按需加载的解释，按需加载 从字面意思来理解应该是动态加载。而动态加载在库项目开发时一般也不需要什么过多的考虑

现在主流的讲按需加载应该都是指的是：使用某个三方库时，仅打包项目中所使用的，用于减少构建体积。

准确的说应该叫做按需打包

开发库文件时实现按需打包的思路

现在一般常见的是两种思路

• 借助 tree shaking
• 借助bable的能力

1. 支持ES Module
   如果我们开发的库支持打出ES Module格式，那么只需要我们的项目构建工具具有tree shaking的能力。那么我们就具有了所谓的按需打包的能力

2. 不支持ES Module
   如果你注意过antd在项目中的编译产物，你便会一眼明了

举个例子，如导入了一个button

import { button } from 'antd'

编译后

import _button from 'antd/lib/xxx'

上面这个功能转换，antd推出来一个bable插件。 babel-plugin-import,如果实现不了所需的功能也可以自己重新写一个，基于babel遍历的访问者模式我们很容易进行功能扩展

即首先我们在开发库项目时，比如组件库。我们只需要保证每个组件都被单独打出一个chunk。那么我们的业务项目在构建时候的借助于上面的思路，便很容易只引入自己所需要的了

在低代码场景下，怎么做呢

在这个场景下，一般会考虑动态加载。但是很遗憾单独使用它并不能达到我们想到的效果

目前想到的思路

• 还是借助babel配合CDN

举个例子

import { button } from 'antd'

编译后产物

import button  from 'http://xxxcnd/button/index.js'