【发布时间】：2016-02-08 03:41:36
【问题描述】：
我遇到了一个问题，当我在 xCode 中运行 React-native 应用程序时，它开始使用我 CPU 的 150%。疯了吧！我也不知道为什么？我正在使用 webpack 将我的 babel 转换为 react。
这是我的所有模块：
"scripts": {
"android-setup-port": "adb reverse tcp:8081 tcp:8080",
"start": "env NODE_ENV=DEV rnws start --hostname localhost",
"build": "env NODE_ENV=PRODUCTION rnws bundle",
"test": "eslint src",
"debugger-replace": "remotedev-debugger-replace --hostname localhost --port 5678",
"remotedev": "npm run debugger-replace && remotedev --hostname localhost --port 5678"
},
"engines": {
"node": ">=4",
"npm": ">=2 <4"
},
"dependencies": {
"@exponent/react-native-navigator": "^0.4.1",
"file-loader": "^0.8.5",
"immutable": "^3.7.5",
"react-native": "^0.19.0",
"react-native-button": "^1.3.1",
"react-native-form": "^1.0.6",
"react-native-google-places-autocomplete": "^1.1.6",
"react-native-maps": "^0.3.0",
"react-redux": "^4.0.6",
"redux": "^3.0.4",
"redux-thunk": "^1.0.3",
"tcomb-form-native": "^0.3.3"
},
"devDependencies": {
"babel-core": "^6.3.17",
"babel-eslint": "^5.0.0-beta6",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"clean-webpack-plugin": "^0.1.5",
"eslint": "^1.10.3",
"eslint-loader": "^1.1.1",
"eslint-plugin-react": "^3.11.2",
"react-native-webpack-server": "^0.8.3",
"remote-redux-devtools": "0.0.10",
"remote-redux-devtools-on-debugger": "^0.2.0",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
}
这是我的 webpack 配置：
var path = require('path'),
webpack = require('webpack'),
Clean = require('clean-webpack-plugin');
// {
// test: /\.(jpe?g|png|gif|svg)$/i,
// loaders: [
// 'url?limit=8192',
// 'img'
// ]
// },
var dev = process.env.NODE_ENV === 'DEV' ? true : false,
production = process.env.NODE_ENV === 'PRODUCTION' ? true : false;
module.exports = {
// debug: false,
// devtool: 'source-map',
entry: {
'index.ios': ['./src/index.jsx'],
'index.android': ['./src/index.jsx'],
},
output: {
path: path.resolve(__dirname, '__build__'),
filename: '[name].js'
},
module: {
loaders: [
{ test: /\.jpe?g$|\.gif$|\.png$/i, loader: "file-loader" },
{
test: /\.jsx?$|\.js?$/,
include: [
path.resolve(__dirname, 'src'),
path.resolve(__dirname, './config'),
path.resolve(__dirname, 'node_modules/react-native/Libraries/react-native'),
path.resolve(__dirname, 'node_modules/react-native-navbar'),
// path.resolve(__dirname, 'node_modules/react-native-maps'),
path.resolve(__dirname, 'node_modules/react-native-google-places-autocomplete'),
path.resolve(__dirname, 'node_modules/@exponent'),
path.resolve(__dirname, 'node_modules/react-clone-referenced-element')
],
loader: 'babel',
query: {
presets: ['es2015', 'stage-0', 'react']
},
},
]
},
resolve: {
extensions: ['', '.js', '.jsx'],
modulesDirectories: [
'node_modules',
'./config',
'./src/',
'./src/components',
'./src/layouts',
'./src/scripts/',
'./src/scripts/actions/',
'./src/scripts/api/',
'./src/scripts/containers/',
'./src/scripts/reducers/'
]
},
plugins: [
new webpack.DefinePlugin({
__PROD__ : production,
__DEV__ : dev
})
].concat(production ? [
new webpack.optimize.UglifyJsPlugin(),
new Clean(['__build__'])
] : [])
};
有人知道为什么会这样吗？我已经在谷歌上搜索了一个解决方案，但找不到！
更新 1：
我还没有解决这个问题。但是我没有运行Simulator，而是连接了我的iPhone 来充当device。至少这可以减轻我的CPU 的压力。
更新 2：
所以在开发过程中，我对这个问题视而不见，因为我不想花太长时间调试它。我认为问题在于需要不需要的文件，在对象上使用 for 循环而不是在数组中包含对象并使用 .map( 映射它们，将 var 更改为 const 和 let，更新我的反应- 符合es6 standards的代码。
这很有帮助！ CPU 的使用率下降并正常运行。
更新 3：
update 2 确实帮了大忙。但是我找到了另一个原因，为什么我的CPU 会受到限制。当启用live reload 我的CPU 使用率直接跳到150+% 并且我的电脑风扇开始非常热。
奇怪的是我的live reload 从来没有真正工作过？但无论如何希望这会有所帮助！
【问题讨论】：
-
+1 有 150% cpu 使用率的问题，但没有使用 react-native。 CPU 与您所拥有的一切类似，但在我将 Babel 添加到项目后就会飙升。从我收集到的 Babel 将所有内容加载到内存中 - 仍在试图找出解决方案。 react-start-kit 没有这个问题：github.com/kriasoft/react-starter-kit
-
@mummybot - 有趣。我认为它一定是某种无限循环之类的。我只是忽略了这个问题，当我进一步开发我的应用程序时，问题就消失了！ +1 我的问题，如果你想 ;)
-
所以我也想通了。我正在为静态资产运行 webpack 开发服务器，并为 PHP 运行单独的 livereload 服务器。不幸的是，在我的设置中，这两者的组合似乎“炸毁”了，我可能没有很好地为 livereload 服务器隔离监视的 PHP 文件并将页面发送到无限循环中。
标签： react-native webpack redux webpack-dev-server