首页babel-plugin-import与babel-plugin-component

babel-plugin-import与babel-plugin-component

时间: 2023-12-31 09:03:59 浏览: 224

babel-plugin-syntax-import-async-component-sync:将 `import()` + `asyncComponent` 异步 react 组件加载转化为同步组件的 babel 语法插件

babel-plugin-syntax-import-async-component-sync 一个将 import() + asyncComponent 异步 react 组件加载转化为同步组件的 babel 语法插件，需要和 babel-plugin-syntax-dynamic-import 配合使用。在 webpack 做前后端同构的工程中，router.js 也是同构的，这个文件会在服务器端和浏览器端分别被调用。为了让前端代码拆分打包，router.js 通常会用 import() 来做动态加载（其实就是 webpack 的 code-splitting 拆分标示），而为了让拆分的代码（通常是一个页面组件）在渲染前获取到组件初始化的数据，我们会封装一个高阶组件来调用页面组件，同时在高阶组件中完成异步数据获取工作。这里 import() + asyncComponent 就存

有什么区别？ babel-plugin-import和babel-plugin-component都是用于按需加载组件的Babel插件。区别在于，babel-plugin-import是由ant-design团队开发的，适用于按需加载Ant Design组件；而babel-plugin-component适用于Vue.js组件库Element UI。两者使用方式和参数设置都有所不同。

阅读全文