react MPA 多頁配置詳解
create-react-app 默認創(chuàng)建的是 SPA 應(yīng)用，隨著代碼量的增加，build 后的 js 文件會越來越大。網(wǎng)上有很多拆分大的 js 文件的方案，但其實把 SPA 拆分成 MPA 也未嘗不是一種解決方案。下面是 react 多頁面配置過程，以備忘。
一、創(chuàng)建工程
create-react-app react-mpa
二、eject 配置文件
yarn eject
測試下 eject 是否正常yarn start
三、配置頁面
① 修改 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'],
}
測試下項目工程是否正常運行 yarn start
四、增加頁面
1、新建頁面所需文件
① 新建 html 頁面
復(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 配置
運行工程
yarn start
測試頁面
http://localhost:3000/index.html
http://localhost:3000/index2.html
倉庫地址
https://github.com/lifefriend/react-mpa
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
使用 React hooks 實現(xiàn)類所有生命周期
react 自 16.8 開始，引入了 Hooks 概念，使得函數(shù)組件中也可以擁有自己的狀態(tài)，并且可以模擬對應(yīng)的生命周期，這篇文章主要介紹了使用 React hooks 怎么實現(xiàn)類里面的所有生命周期,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了react?中?mobx的使用案例詳解,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
React中的路由嵌套和手動實現(xiàn)路由跳轉(zhuǎn)的方式詳解
這篇文章主要介紹了React中的路由嵌套和手動實現(xiàn)路由跳轉(zhuǎn)的方式,手動路由的跳轉(zhuǎn)，主要是通過Link或者NavLink進行跳轉(zhuǎn)的，實際上我們也可以通JavaScript代碼進行跳轉(zhuǎn)，需要的朋友可以參考下2022-11-11
這篇文章主要為大家詳細介紹了React tsx生成隨機驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
基于CSS實現(xiàn)MaterialUI按鈕點擊動畫并封裝成 React 組件
筆者先后開發(fā)過基于vue,react,angular等框架的項目,碧如vue生態(tài)的elementUI, ant-design-vue, iView等成熟的UI框架, react生態(tài)的ant-design, materialUI等,這些第三方UI框架極大的降低了我們開發(fā)一個項目的成本和復(fù)雜度,使開發(fā)者更專注于實現(xiàn)業(yè)務(wù)邏輯和服務(wù)化2021-11-11![詳解react-webpack2-熱模塊替換[HMR]](http://img.jbzj.com/images/xgimg/bcimg5.png)
這篇文章主要介紹了詳解react-webpack2-熱模塊替換[HMR]， 小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了react-router-dom?v6使用詳細示例，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，感興趣的小伙伴可以參考一下，希望對你的學(xué)習(xí)有所幫助2022-09-09
這篇文章主要為大家通過示例講解了Remix?設(shè)計哲學(xué)理念，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
一些剛開始學(xué)習(xí) React，或者從其他框架轉(zhuǎn)入 React 的開發(fā)者，一開始可能不會太關(guān)注性能。因為需要一些時間來發(fā)現(xiàn)新學(xué)習(xí)的框架的性能缺點。這篇文章主要介紹提高React性能的技巧，感興趣的同學(xué)可以參考閱讀2023-04-04
在react-router4中進行代碼拆分的方法（基于webpack）
這篇文章主要介紹了在react-router4中進行代碼拆分的方法（基于webpack），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03