react页面数据过多怎么办_React-多页面应用
1初始化项目
npm init create-react-app my-app
2.修改index
import React from 'react';
import ReactDOM from'react-dom';
import'./index.css';
import App from'./App';
ReactDOM.render(, document.getElementById('root'));
3.修改app.js文件
import React from 'react';
import'./App.css';functionApp() {return(
);
}
exportdefault App;
4.修改多目录结构
5.弹出webpack配置
npm run eject
6.进入config/paths.js中配置appIndexJs路径,默认是路径字符串,现在获取几个页面的字符串列表,将会配置在入口地址。
在module.exports之前添加如下代码
const glob = require('glob');//获取指定路径下的入口文件
functiongetEntries(globPath) {
const files=glob.sync(globPath),
entries={};
files.forEach(function(filepath) {
const split= filepath.split('/');
const name= split[split.length - 2];
entries[name]= './' +filepath;
});returnentries;
}
const entries= getEntries('src/**/index.js');functiongetIndexJs() {
const indexJsList=[];
Object.keys(entries).forEach((name)=>{
const indexjs= resolveModule(resolveApp, `src/${name}/index`)
indexJsList.push({
name,
path: indexjs
});
})returnindexJsList;
}
const indexJsList= getIndexJs()
然后更改module.exports内容
module.exports ={
dotenv: resolveApp('.env'),
appPath: resolveApp('.'),
appBuild: resolveApp('build'),
appPublic: resolveApp('public'),
appHtml: resolveApp('public/index.html'),
appIndexJs: indexJsList,//+++++++++++++
appPackageJson: resolveApp('package.json'),
appSrc: resolveApp('src'),
appTsConfig: resolveApp('tsconfig.json'),
appJsConfig: resolveApp('jsconfig.json'),
yarnLockFile: resolveApp('yarn.lock'),
testsSetup: resolveModule(resolveApp,'src/setupTests'),
proxySetup: resolveApp('src/setupProxy.js'),
appNodeModules: resolveApp('node_modules'),
publicUrl: getPublicUrl(resolveApp('package.json')),
servedPath: getServedPath(resolveApp('package.json')),
entries//+++++++++++++
};
上面有+号的部分为更改的内容。
7.配置entry入口
//配置入口
const entry ={}
paths.appIndexJs.forEach(e=>{
entry[e.name]=[
isEnvDevelopment&&require.resolve('react-dev-utils/webpackHotDevClient'),
e.path
].filter(Boolean)
});
8.更改出口文件配置
//没更改之前的//filename: isEnvProduction//? 'static/js/[name].[contenthash:8].js'//: isEnvDevelopment && 'static/js/bundle.js',
...//chunkFilename: isEnvProduction//? 'static/js/[name].[contenthash:8].chunk.js'//: isEnvDevelopment && 'static/js/[name].chunk.js',
//更改后的
filename: isEnvProduction? 'static/js/[name]/[name].[contenthash:8].js': isEnvDevelopment&& 'static/js/[name]/[name].bundle.js',
...
chunkFilename: isEnvProduction? 'static/js/[name]/[name].[contenthash:8].chunk.js': isEnvDevelopment&& 'static/js/[name]/[name].chunk.js',
9.更改htmlwebpackPlugin
HtmlWebpackPlugin
这个plugin曝光率很高,他主要有两个作用
为html文件中引入的外部资源如script、link动态添加每次compile后的hash,防止引用缓存的外部文件问题
可以生成创建html入口文件,比如单页面可以生成一个html文件入口,配置N个html-webpack-plugin可以生成N个页面入口
现在删除之前的配置,然后加入一下的Plugin配置。
...Object.keys(paths.entries).map((name) =>{return newHtmlWebpackPlugin(
Object.assign(
{},
{
inject:true,
chunks: [name],
template: paths.appHtml,
filename: name+ '.html',
},
isEnvProduction?{
minify: {
removeComments:true,
collapseWhitespace:true,
removeRedundantAttributes:true,
useShortDoctype:true,
removeEmptyAttributes:true,
removeStyleLinkTypeAttributes:true,
keepClosingSlash:true,
minifyJS:true,
minifyCSS:true,
minifyURLs:true,
},
}
: undefined
)
)
}),
注释ManifestPlugin部分代码
//new ManifestPlugin({//fileName: 'asset-manifest.json',//publicPath: publicPath,//generate: (seed, files, entrypoints) => {//const manifestFiles = files.reduce((manifest, file) => {//manifest[file.name] = file.path;//return manifest;//}, seed);//const entrypointFiles = entrypoints.main.filter(//fileName => !fileName.endsWith('.map')//);
//return {//files: manifestFiles,//entrypoints: entrypointFiles,//};//},//}),
react页面数据过多怎么办_React-多页面应用相关推荐
- react大数据量渲染_React大量数据渲染的绝佳解决方案——React虚拟化组件
介绍 在当下Web开发盛行的时代里,Web应用随之面临着各种问题,虽然前端框架或者前端解决方案百花齐放,但是并不是所有的问题都能很完美的解决.由于Web应用是基于浏览器渲染界面的,而由于浏览器瓶颈的限 ...
- vue切换路由页面数据缓存_Vue-Router实现前端页面缓存
一.使用情景 在使用Vue开发单页面应用时,我们通常会使用Vue-Router进行页面导航,Vue-Router在进行路由切换的时候,页面是会重新加载,对应的生命周期函数也会再次执行一遍,但是在有些业 ...
- react提交数据到数据库_React型关系数据库事务
react提交数据到数据库 Spring Framework最近宣布将提供对React式事务管理的支持 . 让我们深入研究它对R2DBC(SQL数据库访问的React式规范)如何工作. 事务管理是一种 ...
- react页面数据过多怎么办_性能!!让你的 React 组件跑得再快一点,收藏
性能和渲染(Render)正相关 React 基于虚拟 DOM 和高效 Diff 算法的完美配合,实现了对 DOM 最小粒度的更新.大多数情况下,React 对 DOM 的渲染效率足以我们的业务日常. ...
- react页面数据过多怎么办_解决 React-Native 加载数据页面卡顿问题
一般情况下,我们在componentDidMount方法里面执行请求数据.根据字面意思:页面组件加载完毕,然后请求数据. 对的 ,没毛病!!! 然而问题就出现,当我们跳转到新页面时,到界面请求完数据, ...
- Element - table固定列页面数据过多滚动时显示问题
背景:使用el-tabe设置右侧固定列 fixed="right",没有设置表格固定高,数据过多时滚动table会出现如下情况: 代码如下: <el-table :data= ...
- react大数据量渲染_React 中的状态自动保存(KeepAlive)
什么是状态保存?假设有下述场景:移动端中,用户访问了一个列表页,上拉浏览列表页的过程中,随着滚动高度逐渐增加,数据也将采用触底分页加载的形式逐步增加,列表页浏览到某个位置,用户看到了感兴趣的项目,点击 ...
- ajax获取php页面数据,ajax如何取php页面的数据
现在经常使用Ajax调用后台php获取后台数据,下面我们来看一下ajax如何取php页面的数据. 推荐:php服务器 1.php连接数据库获取数据库的信息放入json_encode($css);{文件 ...
- php获取当前页面数据,ThinkPHP如何获取当前页面URL信息?
THINKPHP获取当前页面URL信息 想要获取当前页面的url信息,可以借助thinkphp自带的request类来获取当前的url信息 使用\think\Request类$request = Re ...
最新文章
- 每日一皮:虽然我们交付了V2版本,但用户仍然使用V1版本...
- XML解析,dom解析,Jdom解析
- pyecharts第九节、旭日图(现代饼图)
- 第一个C#控制台程序
- 网易数据中台建设实践
- This will have no impact if delete.topic.enable is not set to true以及删除kafka中的topic
- System.FormatException: GUID 应包含带 4 个短划线的 32 位数(xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx)。...
- [译]MediaSession MediaController – Android TV 应用开发教程九
- ambiguous package name 'libglib2.0-0' with more than one installed instance
- Dubbo(十三)dubbo的负载均衡配置策略
- vSphereClient向ESXi主机分配许可证
- rsyslog-mysql_04-Log rsyslog-mysql loganalyzer
- 【代码笔记】iOS-使用MD5加密
- python2项目出现的错误(UnicodeDecodeError)
- [2018.10.18 T1] 艾奇摘苹果
- 阿里云对象存储OSS服务——上传/删除/获取图片
- c语言 calloc ,realloc 的使用
- 【PHP小皮】使用教程
- ANIMO 03 汉化补丁
- Try2Hack 过关技巧和密码
热门文章
- Docker实战:Docker安装部署RabbitMQ
- Android 面试题集整理
- Android --- BaseQuickAdapter 子控件设置了addOnClickListener(R.id.xxx);点击的时候还是没反应
- c2000 pro 固件更新_一加7Pro系统更新新增屏幕侧滑返回手势
- 无穷级数求和7个公式_亿图在线公式编辑器使用方法入门篇
- 多角度对比数据中心常见的三种走线方式
- 分享 | 光纤光缆布线基础知识及系统设计
- 9300万美元投资涌入 新加坡成亚太最大数据中心
- Python:利用python语言绘制多个子图经典案例、代码实现之详细攻略
- ML之回归预测:机器学习中的各种Regression回归算法、关键步骤配图