npm启动并在react中编译的问题
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了npm启动并在react中编译的问题相关的知识，希望对你有一定的参考价值。
因此我已被分配维护一个React网站。我在运行项目时遇到了一些问题。npm start大约需要花费[[4-5mins，同样，保存的每个更改也要花费2-3mins（时间太长）。我无法弄清楚问题出在哪里。也许在webpack配置中或其他。下面列出了代码详细信息：
webpack.config.js
var path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var webpack = require('webpack');
module.exports = {
entry: './src/index.jsx',
output: {
path: path.resolve('dist'),
filename: 'bundle.js',
},
resolve: {
extensions: ['.js', '.jsx', '.css'],
},
module: {
loaders: [
{
test: /.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-3']
}
},
{ test: /.css$/, loader: "style-loader!css-loader" },
{
test: /.less$/,
loader: 'style-loader!css-loader!less-loader'// compiles Less to CSS
},
{
test: /.(png|jpg|)$/,
loader: 'url-loader?limit=200000'
}
]
},
plugins: [new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
inject: 'body'
}), new CopyWebpackPlugin([ { from: 'src/assets', to: 'assets' } ]),
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
mangle: true,
// compress: {
// warnings: false, // Suppress uglification warnings
// pure_getters: true,
// unsafe: true,
// unsafe_comps: true,
// screw_ie8: true,
// conditionals: true,
// unused: true,
// comparisons: true,
// sequences: true,
// dead_code: true,
// evaluate: true,
// if_return: true,
// join_vars: true
// },
output: {
comments: false,
},
exclude: [/.min.js$/gi] // skip pre-minified libs
}),
],
devServer: {
historyApiFallback: true
},
externals: {
// global app config object
config: JSON.stringify({
// apiUrl: 'http://0.0.0.0:8102',
siteUrl: 'http://localhost:ls3003',
apiUrl: 'https://api.xyz.com',
// siteUrl: 'https://dashboard.mltrons.com',
})
}
}
Package.json：
"name": "react-redux-registration-login-example",
"version": "1.0.0",
"repository": {
"type": "git",
"url": "https://github.com/cornflourblue/react-redux-registration-login-example.git"
},
"license": "MIT",
"scripts": {
"start": "webpack-dev-server --host 0.0.0.0 --port 3000 --disableHostCheck",
"build": "webpack"
},
"dependencies": {
"@amcharts/amcharts4": "^4.2.3",
"@data-ui/histogram": "0.0.75",
"@material-ui/core": "^3.9.0",
"@material-ui/icons": "^3.0.2",
"@projectstorm/react-diagrams": "^6.0.1-beta.5",
"chart.js": "^2.7.3",
"chartjs-plugin-zoom": "^0.6.6",
"classnames": "^2.2.6",
"css-loader": "^2.1.0",
"deni-react-treeview": "^0.2.15",
"events": "^3.0.0",
"formik": "^1.4.1",
"history": "^4.6.3",
"jquery": "^3.3.1",
"material-ui-popup-state": "^1.0.2",
"moment": "^2.23.0",
"pusher-js": "^4.3.1",
"rc-steps": "^3.3.1",
"react": "^16.0.0",
"react-addons-css-transition-group": "^15.6.2",
"react-chartjs-2": "^2.7.4",
"react-circular-progressbar": "^1.0.0",
"react-craft-ai-decision-tree": "0.0.26",
"react-datetime-picker": "^2.1.1",
"react-dom": "^16.0.0",
"react-dropzone": "^8.0.3",
"react-facebook-login": "^4.1.1",
"react-ga": "^2.5.7",
"react-google-login": "^4.0.1",
"react-heatmap-grid": "^0.7.3",
"react-highlight": "^0.12.0",
"react-joyride": "^2.0.5",
"react-linkedin-login-oauth2": "^1.0.6",
"react-paginate": "^6.2.1",
"react-redux": "^5.0.5",
"react-router-dom": "^4.1.2",
"react-table": "^6.8.6",
"recharts": "^1.8.5",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0",
"style-loader": "^0.23.1",
"web-wechat-login": "^1.0.9",
"yup": "^0.26.6"
},
"devDependencies": {
"babel-core": "^6.21.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-3": "^6.24.1",
"copy-webpack-plugin": "^4.6.0",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^2.26.0",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"path": "^0.12.7",
"url-loader": "^1.1.2",
"webpack": "3.6.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "2.11.3"
}
}
src / index.html：
<html lang="en">
<head>
<base href="/" />
<meta charset="UTF-8">
<meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
>
<title>dashboard</title>
<link rel="shortcut icon" href="assets/favicon.ico">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<!--<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<style>
a { cursor: pointer; text-decoration: none }
.help-block { font-size: 12px; }
body{
margin: 0;
/*background-color: #f5f5f5;*/
background-color: #232122;
}
</style>
<!-- Hotjar Tracking Code for https://www.dashboard.mltrons.com -->
<script>
(function(h,o,t,j,a,r){
h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
h._hjSettings={hjid:1317845,hjsv:6};
a=o.getElementsByTagName('head')[0];
r=o.createElement('script');r.async=1;
r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
a.appendChild(r);
})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>
</head>
<body>
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.8.35/go.js"></script>-->
<script src="assets/js/go.js"></script>
<script src="assets/js/extension.js"></script>
<script src="https://static.landbot.io/landbot-widget/landbot-widget-1.0.0.js"></script>
</body>
</html>
src / index.jsx：
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { store } from './_helpers';
import { App } from './App';
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('app')
);
如果您还有其他需要，请告诉我。谢谢
答案
您仅应在生产中添加所有webpack.optimize插件。在开发中将其关闭，将花费更少的时间。if (PRODUCTION) {
config.plugins.push(
...your optimize plugins here
);
}
以上是关于npm启动并在react中编译的问题的主要内容，如果未能解决你的问题，请参考以下文章
npm 启动错误并出现 ERR！代码 ENOENT，系统调用打开
使用一个 NPM 命令启动 react-create-app 和 Electron.js