日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

React基于路由的代碼分割技術詳解_React

作者：黎燃 ? 更新時間： 2023-01-29 編程語言

代碼分割

// app.js
import { add } from './math.js';
console.log(add(16, 26)); // 42

大多數React應用程序將使用Webpack、Rollup或Browserify等構建工具來打包文件。打包是將文件引入并合并到單個文件中，最后形成一個“包”的過程。然后在頁面上引入捆綁包，整個應用程序可以一次加載

function add(a, b) {
  return a + b;
}
console.log(add(16, 26)); // 42

小心： 最后，包文件將與上面的示例非常不同。 如果使用的是Create React App、Next Js、Gatsby或類似工具，將擁有一個可直接用于打包的Webpack配置。 如果不使用這些工具，則需要自己配置它們。例如，查看Webpack文檔中的安裝和入門教程。

分割

打包是一項偉大的技術，但隨著應用程序的增長，代碼包也會隨之增長。尤其是在集成大型第三方庫的情況下。需要注意代碼包中包含的代碼，以避免由于容量過大而導致加載時間過長。 為了避免創建大型代碼包，在早期階段考慮這個問題并劃分代碼包是一個不錯的選擇。代碼分區是Webpack、Rollup和Browserify（factor bundle）等打包程序支持的技術，它可以創建多個包并在運行時動態加載它們。 應用程序的代碼分段可以幫助“懶惰地加載”當前用戶所需的內容，并可以顯著提高應用程序的性能。雖然它不會減少應用程序的總代碼量，但可以避免加載用戶永遠不需要的代碼，并減少在初始加載時需要加載的代碼量。

import { add } from './math';
console.log(add(16, 26));

import("./math").then(math => {
  console.log(math.add(16, 26));
});

當Webpack解析此語法時，它將自動拆分代碼。如果使用CreateReact應用程序，則該功能已被開箱即用，可以立即使用該功能。下一個Js在沒有配置的情況下也支持此功能。 如果自己配置Webpack，可能需要閱讀Webpack的代碼拆分指南。的Webpack配置應該與此類似。 當使用Babel時，應該確保Babel能夠解析動態導入語法，而不是轉換它。對于這個需求，需要babel插件語法導入插件。

import React, { Suspense } from 'react';
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

當組件首次呈現時，此代碼將自動導入包含OtherComponent組件的包。 反應Lazy接受需要動態調用import（）的函數。它必須返回一個promise，這需要解析dealout導出的React組件。 然后，應該在Suspense組件中呈現懶惰組件，以便我們可以在等待加載懶惰組件時使用優雅的降級（如加載指示符）。

import React, { Suspense } from 'react';
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

回退屬性接受在加載組件期間要顯示的任何React元素。可以將Suspend組件放置在延遲加載組件上方的任何位置。甚至可以用一個Suspend組件包裝多個延遲加載組件。

import React, { Suspense } from 'react';
import MyErrorBoundary from './MyErrorBoundary';
const OtherComponent = React.lazy(() => import('./OtherComponent'));
const AnotherComponent = React.lazy(() => import('./AnotherComponent'));
const MyComponent = () => (
  <div>
    <MyErrorBoundary>
      <Suspense fallback={<div>Loading...</div>}>
        <section>
          <OtherComponent />
          <AnotherComponent />
        </section>
      </Suspense>
    </MyErrorBoundary>
  </div>
);

基于路由的代碼分割

決定在哪里引入代碼分段需要一些技巧。需要確保所選位置可以均勻地拆分代碼包，而不會影響用戶體驗。 一個好的選擇是從路由開始。大多數web用戶習慣于在頁面之間進行加載和切換過程。還可以選擇重新渲染整個頁面，這樣用戶在渲染時就不必與頁面上的其他元素交互。 以下是如何在應用程序中使用React的示例。第三方庫（如lazy和React Router）用于配置基于路由的代碼拆分。

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));
const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
      </Switch>
    </Suspense>
  </Router>
);

反應Lazy當前僅支持默認導出。如果要導入的模塊使用命名導出，則可以創建一個中間模塊作為默認模塊重新導出。這確保了樹抖動不會出錯，并且不會引入不必要的組件。 反應Lazy和Suspend技術尚不支持服務器端渲染。如果想在使用服務器端渲染的應用程序中使用它，我們建議使用可加載組件。它有一個很棒的服務器端渲染和打包指南。

原文鏈接：https://juejin.cn/post/7174057547681234974

欄目分類
最近更新