📦 React-Imported-Component v6

进口组件✂

额外物品

webpack 导入

服务器端 API

已使用的样式

结论

长话短说——没人关心版本 1 和 2——到那时，我要说的这个库甚至都改了名字。版本 3 根本不存在，版本 4 和版本 5 的区别在于forwardRef是否支持 React 16，这算是一个重大变更。所以，简而言之，v6 实际上是 API 的第三次迭代。

版本升级到 6 也是得益于 React 的新特性。这次是 Hooks 的加入，使得 React-imported-component 成为第一个公开Hook API的代码分割库，同时也是第一个兼容 Create-React-App 的代码分割库，这要归功于它对 Babel宏的支持。

停停停，为什么不直接叫“懒惰”呢？

服务器端渲染、跟踪和高级 API。以下是对比表格：

准备好了吗？跳进去！

theKashey / react-imported-component

✂️📦无需打包工具即可实现对服务器端渲染友好的代码分割

进口组件✂

代码分割总是有效的^*

支持 SSR 的代码拆分，兼容任何平台，
一次导入即可提供更好的体验。

^它真的不会让你失望。这一切都要归功于你的打包者。

👉使用方法| API |设置| SSR | CCS 并发加载| Webpack/Parcel

图书馆	悬念	社会主义共和国	钩子	图书馆	非模块	进口（./${value}）	巴别塔宏	仅 webpack
React.lazy	✅	❌	❌	❌	❌	❌	😹	无SSR
react-loadable	✅	✅	❌	❌	✅	❌	❌	😿
@loadable/组件	✅	✅	❌	✅	❌	✅	❌	😿
导入组件	✅	✅	✅	✅	✅	❌	✅	😸

阅读更多关于此表格显示内容的信息

主要特点：

• 1️⃣ 单一数据源——您的打包工具驱动一切
• 📖库级代码拆分
• 🧙️兼容混合渲染和预渲染
• 💡 TypeScript绑定
• ⚛️底层使用了React.Lazy（如果禁用了热模块更新）
• 🌟 客户端异步，服务器同步。支持Suspense（甚至……）

在 GitHub 上查看

使用导入的钩子

懒加载不仅仅是加载React.lazy和移除Components——任何懒加载变体的背后都只是一个动态的加载器import，它可以加载所有内容。而你所需要的仅仅是一个合适的“React 集成”来管理加载状态。

// a STATIC table with imports
const languages = {
  'en': () => import('./i18n/en'), // it's probably a json...
  'de': () => import('./i18n/de'),
}
// just a helper function
const pickLanguage = (lng) => languages[lng];
// your component
const MyI18nProvider = ({lng, children}) => {
  // let's pick and provide correct import function for our language
  const {
   imported: messages = {} // defaulting to empty object
  } = useImported(pickLanguage(lng));

  // set messages to the Provider
  return <I18nProvider value={messages}>{children}</I18nProvider>
}

就这些了。唯一的问题是默认值{}每次渲染都会不同，所以最好将它们提取到组件外部的单独变量中。不过，您不必担心这个问题。

useImported可以加载任何你想要的内容，并且任何其他公开的 APIreact-imported-component都是基于它构建的。

importedModule 和 ImportedModule

useImported这种方式并非总是非常方便，有时更声明式的方法会更受欢迎。因此，我们提供了一个辅助工具，可以通过 React 的render props
接口 导入任何你想要的东西。对于大多数人来说，这种模式更广为人知的名称是loadable.lib（尽管它最初是为导入而引入的）。

import {importedModule, ImportedModule} from 'react-imported-component';

// you can use it to codesplit and  use `momentjs`, no offence :)
const Moment = importedModule(() => import('moment'));

<Moment fallback="long time ago">
  {(momentjs /* default imports are auto-imported*/) => momentjs(date).fromNow()}
</Moment>

// or, again, translations

<ImportedModule
 import={() => import('./i18n/en')}
 // fallback="..." // will throw to the Suspense boundary without fallback provided
>
 {(messages) => <I18nProvider value={messages}>{children}</I18nProvider> }
</ImportedModule>

导入和懒惰

还有两个“通用”API——imported和lazy。
其中lazy——像一个React.lazy，在生产环境中表现不佳，而则是imported，嗯，是与第一代代码分割库兼容的旧式优秀API。

const Component = importedComponent( () => import('./Component'), {
  LoadingComponent: Spinner, // what to display during the loading
  ErrorComponent: FatalError // what to display in case of error
});

Component.preload(); // force preload

// render it
<Component... />

额外物品

Create React App 支持

关于加拿大税务局（CRA），您应该了解以下三件事：

• 更改项目配置很困难，因此建议您不要这样做。
• 它支持SSR或预渲染
• 这使得更好的代码拆分变得有点复杂。

然而，虽然其他对 SSR 友好的代码分割解决方案需要babel和webpack插件才能工作，但react-imported-component它不需要 webpack 的任何功能，它与打包器无关，并且提供了一个babel 宏，这是唯一一个可以与 CRA 开箱即用的功能。

就这么用react-imported-component/macro，然后就完事了。

import {imported} from "react-imported-component/macro";
imported(()=>import('./aGoodDay'));

捆绑器独立性

这又意味着三件不同的事情：

• 它兼容 Parcel、Rollup 或 SystemJS 等打包工具。使用哪种打包工具都无所谓，都能正常工作。
• 它与React Snap兼容。“使用情况跟踪”永不停歇，在无头浏览器中渲染页面后，你可以询问它“哪些代码块需要再次渲染”，它会返回一个列表。它也适用于非托管的“真实”环境imports。基本上，这无关紧要。
• 它不如代码拆分方案高效，集成度也更高，因此可以在服务器端渲染 (SSR) 期间清除已使用的代码块。而且，正如我所说——确实如此。

加载编排

实现脚本重新加载的第一种方法是提高加载效率。imported-component它提供了一个独立的入口点，/boot在主脚本执行之前启动初始化过程，从而提前加载延迟加载的脚本。这对于 CRA 或 Parcel 来说是一个很好的解决方案，因为在这些平台上，您可能不知道要内联到 HTML 中的代码块文件的真实名称（未安装额外插件）。

import "../async-requires";
import {injectLoadableTracker} from "react-imported-component/boot";
// ^ just 1kb

// injects runtime
injectLoadableTracker('importedMarks');


// give browser a tick to kick off script loading
Promise.resolve().then(() =>
  Promise.resolve().then(() => { 
    // the rest of your application
    // imported with a little "pause"
    require('./main')
  })
);

这个方法非常简单有趣——你的 JavaScript 代码会被解析和求值，但不会完全执行。这时imported会触发导入，加载所需的代码块，只需调用imports它即可。之后你的应用程序会继续执行。

为了说明我的想法，我提供两个 Lighthouse 快照（速度降低 4 倍，JS 包大小为 3MB）：

• main像上面的例子一样，在承诺中提出要求
• 不需要main在 Promise 中进行请求，就像上面的示例一样（只是将其移到了其他地方catch，所有代码仍然在 bundle 中）。

或者你更相信Profiler火焰图？

请注意左侧的小“时间框”，以及分配给浏览器的微任务，以便在右侧启动网络操作。

注意一下那个“时间盒子”有多小。

这使得脚本预加载和预取之类的功能变得不那么重要——即使没有它们，情况也不会太糟。因此，使用 CRA 可能就能获得不错的 SSR 体验。

深度集成 Webpack

然而，要获得最佳效果，需要更精细的方法。v6 版本中的另一项改动——一个用于 webpack 集成的独立软件包——将对此有所帮助。它的名字很明确：

const {ImportedPlugin} = require('webpack-imported');

module.exports = {
  plugins: [
    new ImportedPlugin('imported.json')
  ]
};

import {importStats} from "webpack-imported";
import stats from 'build/stats.json';

const importedStat = importStats(stats);

import {importedAssets} from "webpack-imported"

一个用于收集数据的 webpack 插件，以及客户端 API（包括 React 绑定），可以开箱即用地处理所有事情。

import importedData from 'build/imported.json';

<WebpackImport
   stats={importedData}
   chunks={getMarkedChunks(marks)}
   publicPath={importedData.config.publicPath}
   crossOrigin={CDN_ANONYMOUS}
/>

CSS

CSS 也得到了最佳处理——对于纯 CSS 文件，关键样式提取功能开箱即用。

流媒体

所有使用的库都具有对 Streaming 友好的 API，并且能够提供您所期望的最佳 TTFB。

为什么？为什么？

如果您正在寻找关于“为什么要进行代码拆分”、“拆分哪些代码”和“何时进行代码拆分”以及如何优化 JS 或 CSS 交付的答案。

✂️ 代码分割——是什么、何时分割以及为什么

安东·科尔祖诺夫 ・ 2019年10月4日

#react #代码分割 #web开发

结论

• hooks API
• 加载模块
• 装载组件
• 使用服务器端跟踪
• Babel 宏支持
• 虽然不依赖于 webpack，但它对更深层次的浏览器集成提供了最佳支持。
• 专为你打造！

👉 https://github.com/theKashey/react-imported-component