欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

react MPA 多頁(yè)配置詳解

 更新時(shí)間：2019年10月18日 15:29:48   作者：lifefriend_007  
這篇文章主要介紹了react MPA 多頁(yè)配置詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

create-react-app 默認(rèn)創(chuàng)建的是 SPA 應(yīng)用，隨著代碼量的增加，build 后的 js 文件會(huì)越來(lái)越大。網(wǎng)上有很多拆分大的 js 文件的方案，但其實(shí)把 SPA 拆分成 MPA 也未嘗不是一種解決方案。下面是 react 多頁(yè)面配置過(guò)程，以備忘。

一、創(chuàng)建工程

create-react-app react-mpa

二、eject 配置文件

yarn eject

測(cè)試下 eject 是否正常yarn start

三、配置頁(yè)面

① 修改 webpack entry

entry: {
   index:[
    isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient'),
    paths.appIndexJs,
   ].filter(Boolean)
  },

② 修改 webpack output

output: {
  filename: isEnvProduction
    ? 'static/js/[name].[contenthash:8].js'
    : isEnvDevelopment && 'static/js/[name].js',
}

③ 修改 HtmlWebpackPlugin

{
 inject: true,
 template: paths.appHtml,
 // 新增
 filename: 'index.html',
 chunks: ['index'],
}

測(cè)試下項(xiàng)目工程是否正常運(yùn)行 yarn start

四、增加頁(yè)面

1、新建頁(yè)面所需文件

① 新建 html 頁(yè)面
復(fù)制 public/index.html 為 public/index2.html

② 新建 js 文件
復(fù)制 src/index.js 為 src/index2.js
復(fù)制 src/App.js 為 src/App2.js

③ 增加文件引用(config/paths.js)

2、webpack 配置

① 增加 entry 配置

② 增加 HtmlWebpackPlugin 配置

運(yùn)行工程
yarn start

測(cè)試頁(yè)面
http://localhost:3000/index.html
http://localhost:3000/index2.html

倉(cāng)庫(kù)地址
https://github.com/lifefriend/react-mpa

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 使用 React hooks 實(shí)現(xiàn)類所有生命周期

    使用 React hooks 實(shí)現(xiàn)類所有生命周期

    react 自 16.8 開(kāi)始，引入了 Hooks 概念，使得函數(shù)組件中也可以擁有自己的狀態(tài)，并且可以模擬對(duì)應(yīng)的生命周期，這篇文章主要介紹了使用 React hooks 怎么實(shí)現(xiàn)類里面的所有生命周期,需要的朋友可以參考下
    2023-02-02
  • react?中?mobx的使用案例詳解

    react?中?mobx的使用案例詳解

    這篇文章主要介紹了react?中?mobx的使用案例詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2023-04-04
  • React中的路由嵌套和手動(dòng)實(shí)現(xiàn)路由跳轉(zhuǎn)的方式詳解

    React中的路由嵌套和手動(dòng)實(shí)現(xiàn)路由跳轉(zhuǎn)的方式詳解

    這篇文章主要介紹了React中的路由嵌套和手動(dòng)實(shí)現(xiàn)路由跳轉(zhuǎn)的方式,手動(dòng)路由的跳轉(zhuǎn)，主要是通過(guò)Link或者NavLink進(jìn)行跳轉(zhuǎn)的，實(shí)際上我們也可以通JavaScript代碼進(jìn)行跳轉(zhuǎn)，需要的朋友可以參考下
    2022-11-11
  • React tsx生成隨機(jī)驗(yàn)證碼

    React tsx生成隨機(jī)驗(yàn)證碼

    這篇文章主要為大家詳細(xì)介紹了React tsx生成隨機(jī)驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2021-04-04
  • 基于CSS實(shí)現(xiàn)MaterialUI按鈕點(diǎn)擊動(dòng)畫(huà)并封裝成 React 組件

    基于CSS實(shí)現(xiàn)MaterialUI按鈕點(diǎn)擊動(dòng)畫(huà)并封裝成 React 組件

    筆者先后開(kāi)發(fā)過(guò)基于vue,react,angular等框架的項(xiàng)目,碧如vue生態(tài)的elementUI, ant-design-vue, iView等成熟的UI框架, react生態(tài)的ant-design, materialUI等,這些第三方UI框架極大的降低了我們開(kāi)發(fā)一個(gè)項(xiàng)目的成本和復(fù)雜度,使開(kāi)發(fā)者更專注于實(shí)現(xiàn)業(yè)務(wù)邏輯和服務(wù)化
    2021-11-11
  • 詳解react-webpack2-熱模塊替換[HMR]

    詳解react-webpack2-熱模塊替換[HMR]

    這篇文章主要介紹了詳解react-webpack2-熱模塊替換[HMR]， 小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-08-08
  • react-router-dom?v6?使用詳細(xì)示例

    react-router-dom?v6?使用詳細(xì)示例

    這篇文章主要介紹了react-router-dom?v6使用詳細(xì)示例，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，感興趣的小伙伴可以參考一下，希望對(duì)你的學(xué)習(xí)有所幫助
    2022-09-09
  • 通過(guò)示例講解Remix?設(shè)計(jì)哲學(xué)理念

    通過(guò)示例講解Remix?設(shè)計(jì)哲學(xué)理念

    這篇文章主要為大家通過(guò)示例講解了Remix?設(shè)計(jì)哲學(xué)理念，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-03-03
  • Javascript之提高React性能的技巧

    Javascript之提高React性能的技巧

    一些剛開(kāi)始學(xué)習(xí) React，或者從其他框架轉(zhuǎn)入 React 的開(kāi)發(fā)者，一開(kāi)始可能不會(huì)太關(guān)注性能。因?yàn)樾枰恍r(shí)間來(lái)發(fā)現(xiàn)新學(xué)習(xí)的框架的性能缺點(diǎn)。這篇文章主要介紹提高React性能的技巧，感興趣的同學(xué)可以參考閱讀
    2023-04-04
  • 在react-router4中進(jìn)行代碼拆分的方法（基于webpack）

    在react-router4中進(jìn)行代碼拆分的方法（基于webpack）

    這篇文章主要介紹了在react-router4中進(jìn)行代碼拆分的方法（基于webpack），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-03-03

最新評(píng)論