react MPA 多页配置详解


Posted in Javascript onOctober 18, 2019

create-react-app 默认创建的是 SPA 应用,随着代码量的增加,build 后的 js 文件会越来越大。网上有很多拆分大的 js 文件的方案,但其实把 SPA 拆分成 MPA 也未尝不是一种解决方案。下面是 react 多页面配置过程,以备忘。

一、创建工程

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 页面
复制 public/index.html 为 public/index2.html

② 新建 js 文件
复制 src/index.js 为 src/index2.js
复制 src/App.js 为 src/App2.js

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

react MPA 多页配置详解

2、webpack 配置

① 增加 entry 配置

react MPA 多页配置详解

② 增加 HtmlWebpackPlugin 配置

react MPA 多页配置详解

运行工程
yarn start

测试页面
http://localhost:3000/index.html
http://localhost:3000/index2.html

仓库地址
https://github.com/lifefriend/react-mpa

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery插件 cluetip 关键词注释
Jan 12 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
Dec 11 Javascript
ExtJS中设置下拉列表框不可编辑的方法
May 07 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
Dec 18 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
Dec 20 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
Jun 19 Javascript
jqGrid中文文档之选项设置
Dec 02 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
Mar 22 Javascript
angular.js分页代码的实例
Jul 27 Javascript
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
javascript回调函数的概念理解与用法分析
May 27 Javascript
JS绘图Flot如何实现可选显示曲线图功能
Oct 16 Javascript
vue滚动插件better-scroll使用详解
Oct 18 #Javascript
VUE实现密码验证与提示功能
Oct 18 #Javascript
VUE实现图片验证码功能
Nov 18 #Javascript
countUp.js实现数字滚动效果
Oct 18 #Javascript
Vue-cli3项目引入Typescript的实现方法
Oct 18 #Javascript
细述Javascript的加法运算符的具体使用
Oct 18 #Javascript
ElementUI之Message功能拓展详解
Oct 18 #Javascript
You might like
国外Lightbox v2.03.3 最新版 下载
2007/10/17 Javascript
jQuery1.5.1 animate方法源码阅读
2011/04/05 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
2015/07/27 Javascript
详解JavaScript正则表达式之RegExp对象
2015/12/13 Javascript
不定义JQuery插件 不要说会JQuery
2016/03/07 Javascript
Bootstrap Paginator分页插件使用方法详解
2016/05/30 Javascript
Bootstrap输入框组件简单实现代码
2017/03/06 Javascript
详解webpack提取第三方库的正确姿势
2017/12/22 Javascript
Vue中render函数的使用方法
2018/01/31 Javascript
JS实现的字符串数组去重功能小结
2019/06/17 Javascript
开发中常用的25个JavaScript单行代码(小结)
2019/06/28 Javascript
用JS实现选项卡
2020/03/23 Javascript
JS算法教程之字符串去重与字符串反转
2020/12/15 Javascript
[00:59]DOTA2荣耀之路1:Doom is back!weapon X!
2018/05/22 DOTA
利用标准库fractions模块让Python支持分数类型的方法详解
2017/08/11 Python
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
python MySQLdb使用教程详解
2018/03/20 Python
python中文编码与json中文输出问题详解
2018/08/24 Python
Python3 列表,数组,矩阵的相互转换的方法示例
2019/08/05 Python
感知器基础原理及python实现过程详解
2019/09/30 Python
Python模块 _winreg操作注册表
2020/02/05 Python
django 利用Q对象与F对象进行查询的实现
2020/05/15 Python
Django 解决distinct无法去除重复数据的问题
2020/05/20 Python
Python实现淘宝秒杀功能的示例代码
2021/01/19 Python
python线程优先级队列知识点总结
2021/02/28 Python
美国网上眼镜供应商:LEOTONY(眼镜、RX太阳镜和太阳镜)
2017/10/31 全球购物
亚马逊墨西哥站:Amazon.com.mx
2018/08/26 全球购物
全球500多个机场的接送服务:Suntransfers
2019/06/03 全球购物
小学教师自我鉴定
2013/11/07 职场文书
淘宝客服自我总结鉴定
2014/01/25 职场文书
新书吧创业计划书
2014/01/31 职场文书
应届毕业生通用的自荐书范文
2014/02/07 职场文书
学校评语大全
2014/05/06 职场文书
电台编导求职信
2014/05/06 职场文书
2014年毕业演讲稿范文
2014/05/13 职场文书
创业计划书之餐饮馄饨店
2019/07/18 职场文书