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(

page1

);

}

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,//};//},//}),