组件库支持按需加载
组件库支持按需加载
技术学习|2024-2-5|最后更新: 2024-3-10
工程化
type
status
date
slug
summary
tags
category
icon
password
Blocking
Blocked by
top
URL
Sub-item
Parent item

按需引入

直接指明组件的具体位置。

通过babel插件

使用babel插件是目前大多数组件库实现按需引入的方式。
ElementUI使用的是babel-plugin-component
antd 使用的是babel-plugin-import
原理：利用babel将全局import代码转换为按需引入代码

Tree Shaking

利用esm 支持静态编译的特性，在编译阶段利用AST做死区分析，将无用的代码删掉。
操作：
  • 首先组件库需要输出es modules模块规范，
  • 在package.json中配置sideEffets和module
    • module ：指明esm的入口文件
    • sideEffets ： 指明具有副作用的文件，比如一些全局样式文件，不会被Tree Shaking删掉。
  • 使用者需要使用支持tree Shaking的打包工具，例如webpack 或roolup，开启tree-sharking。
 
如何让组件库支持按需引入
按需引用 Tree-Shaing也就是为了优化打包体积，消除对无用模块的引用，作为性能优化中的重要手段之一，也应该是每个合格组件库都应该做到的。接下来就以package-demo组件库为例，一步步构建出一个内部组件库。引用…
如何让组件库支持按需引入
https://zhuanlan.zhihu.com/p/473188268
如何让组件库支持按需引入
从组件按需引入深入前端打包构建 - 掘金
在使用组件库进行前端页面开发的过程中，组件按需引入是每个前端程序员在开发过程中都或多或少了解过的功能。这篇文章将从组件库按需引入方式的介绍入手，进一步加深读者对前端工程化中遇到的问题和概念的理解。
从组件按需引入深入前端打包构建 - 掘金
https://juejin.cn/post/7159033848741756936
Webpack 原理系列九：Tree-Shaking 实现原理 - 掘金
一、什么是 Tree Shaking Tree-Shaking 是一种基于 ES Module 规范的 Dead Code Elimination 技术，它会在运行过程中静态分析模块之间的导入导出，确
Webpack 原理系列九：Tree-Shaking 实现原理 - 掘金
https://juejin.cn/post/7002410645316436004
 
鼠标、键盘事件前端模块化输出
Loading...