React开发前的配置

1. 安装调试插件：React Developer Tools

chrome网上应用店：React Developer Tools
作用：显示React的dom结构、查看React边界和传递属性等

2. 释放eject( 让react具有配置能力 )

eject不可重复执行并且无逆向命令且配置修改后无法导出

npm run eject #如遇报错，git commit一下

执行后的文件变化：

• 增加了config和scripts目录、scripts中eject消失
• package.json中增加很多依赖，react-scripts消失并被释放到项目根目录中

3. 浏览器检测性能

直接在地址后面加上/?react_perf，然后打开 Chrome DevTools Performance。官方文档 Performance主要根据以下两项来优化性能：

• User Timing：应用完成任务的时长，从而了解代码执行代码性能
• Summary中的Bottom-up：自下而上执行时间

4. MPA配置

config/paths

module.exports = {
  ...
  appHtml: resolveApp('public/index.html'),
  appQueryHtml: resolveApp('public/query.html'),
  appIndexJs: resolveModule(resolveApp, 'src/index'),
  appQueryJs: resolveModule(resolveApp, 'src/query'),
  ...
}

config/webpack.config.js

// entry修改为如下
entry: {
  index: [paths.appIndexJs, isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient')].filter(Boolean),
  query: [paths.appQueryJs, isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient')].filter(Boolean)
},

// 每个html需要映射成webpackPlugin的实例
new HtmlWebpackPlugin(
Object.assign(
  {},
  {
    inject: true,
    template: paths.appHtml,
    filename: 'index.html', //new row
    chunk: ['index'] //new row
  },
// query同上

MPA和SPA各有利弊

• MPA一个页面一个HTML，对于页面个性化需求较高时不至于引起连锁错误，目录清晰...
• SPA通过路由也可实现目录划分，一般没有特别需求建议入手SPA
• 更具体区别和性能对比参考：这里

--- 更新中