实现一个按需加载插件

前端 0 584 0
发表于: 2022-11-12 21:08:04

简介: babel插件&ast

源码位置

https://github.com/galaxy-s10/webpack5-multi-page-template/blob/master/replaceLib.js

概况

参考了babel-plugin-import,实现了我认为核心的三个配置项:libraryNamelibraryDirectorystyle

测试

由于现代的组件库大多数都实现了原生的 ES modules 的 tree shaking,因此我们需要下载旧版的组件库才能测试出效果,这里我使用了 ant-design-vue 的 1.1.0 版本以及 antd 的 2.13.14 版本进行测试。

当遇到下面的代码时,会仅仅将 Button 和 Switch 进行打包:

import { Button, Switch } from 'ant-design-vue';
console.log(Button, Switch);

使用

将 replaceLib.js 放到和 babel.config.js 同级的目录里,然后在 babel.config.js 里添加:

plugins: [
  // ...
  [
    './replaceLib',
    // Options在 babel@7+ 中不能是数组,但是可以添加带名字的插件来支持多个依赖。
    { libraryName: 'ant-design-vue', libraryDirectory: 'lib', style: 'css' },
    'aaa', // 这个名字可以随便起
  ],
  [
    './replaceLib',
    { libraryName: 'antd', libraryDirectory: 'lib', style: 'css' },
    'bbb',
  ],
],

引用

babel

最后更新于:2022-11-12 21:08:04

欢迎评论留言~
0/400
支持markdown
Comments | 0 条留言
按时间
按热度
目前还没有人留言~