我为一家客户是其他公司的公司工作。数据库中的公司记录集有40多个字段,有一万多个公司(包括一个字段,在大多数情况下保存一个可笑的长字符串。)通过express和通配符SQL调用返回的JSON数据有效负载超过400万行在邮递员。
背景:
我们在VB.NET中使用ASMX Web服务进行了此设置,但是当必须序列化JSON时,对客户端的响应平均接近30秒。合作很麻烦,很痛苦。
回到.NET MVC中的旧版本,有时需要花费十到十五秒的时间来填充公司名称的简单选择输入,而不是渲染UI。
新环境:
我目前使用带有webpack 3+的SERN环境构建了第4代系统。我已经启用了API在我的应用程序端口(8080)的单独端口(5000)上运行CORS并测试了有效负载。现在还是8秒。更好但不是最佳。
问题:
如何加快有效载荷?我听说过React能够从Node API中分离有效负载,但却无法知道如何完成这些工作。任何人都可以使用下面的代码,或者告诉我在哪里可以改进或指向一些库或某些可以加快SQL调用或数据传输性能的东西?
目前的POSTMAN效果统计: SQL:2.679秒 快递:1.331秒 客户API:3.976秒
的package.json:
{
"name": "project",
"version": "1.0.0",
"description": "desc",
"main": "index.js",
"scripts": {
"build": "webpack",
"start": "concurrently \"webpack-dev-server\" \" node ./server/core/server.js\"",
"dev": "webpack-dev-server",
"server": "node ./server/core/server.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/djErock/EMR4.git"
},
"author": "Erik Grosskurth",
"license": "MIT",
"bugs": {
"url": "https://github.com/djErock/EMR4/issues"
},
"homepage": "https://github.com/djErock/EMR4#readme",
"dependencies": {
"axios": "^0.16.2",
"cors": "^2.8.4",
"jquery": "^3.2.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-router-dom": "^4.1.1"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-latest": "^6.24.1",
"babel-preset-react": "^6.24.1",
"concurrently": "^3.5.0",
"css-loader": "^0.28.4",
"express": "^4.16.0",
"file-loader": "^0.11.2",
"mssql": "^4.1.0",
"react-hot-loader": "^3.0.0-beta.7",
"style-loader": "^0.18.2",
"webpack": "^3.6.0",
"webpack-dev-middleware": "^1.12.0",
"webpack-dev-server": "^2.9.1"
}
}
Webpack.config:
var webpack = require('webpack');
var path = require('path');
module.exports = {
entry: [
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./src/index.js'
],
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/'
},
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
],
},
devServer: {
historyApiFallback: true,
hot: true
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
]
};
Server.js
const webpackDevServer = require('webpack-dev-server');
const webpack = require('webpack');
const config = require('../../webpack.config.js');
const options = {
contentBase: './dist',
hot: true
};
var app = require('express')();
var cors = require('cors');
app.use(function (req, res, next) {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
res.setHeader('Access-Control-Allow-Credentials', true);
// Pass to next layer of middleware
next();
});
const companies = require("../controllers/company.js");
app.get('/api/companies', function (req, res) {
companies.getCompanyList(req, res);
});
webpackDevServer.addDevServerEntrypoints(config, options);
const compiler = webpack(config);
const server = new webpackDevServer(compiler, options);
app.listen(5000, () => {
console.log('dev server listening on port 5000');
});
comapny.js
var db = require("../core/db");
exports.getCompanyList = function(req, resp) {
db.execSQL("SELECT * FROM tblCompany", function(data, err) {
if (err) {
resp.writeHead(500, "Internal Error Occurred",{"Content-Type": "application/json"});
resp.write(JSON.stringify(err));
}else {
resp.writeHead(200, {"Content-Type": "application/json"});
resp.write(JSON.stringify(data));
}
resp.end();
});
}
DB.js
var sqlDB = require("mssql");
var settings = require("../settings.js");
exports.execSQL = function(sql, callback) {
var conn = new sqlDB.ConnectionPool(settings.dbConfig);
conn.connect().then(function() {
var req = new sqlDB.Request(conn);
req.query(sql).then(function(recordset) {
callback(recordset);
}).catch(function(err) {
console.log(err);
callback(null, err);
});
}).catch(function(err) {
console.log(err);
callback(null, err);
});
};
与组件中的axios ajax调用进行反应:
handleOnChange(e) {
e.preventDefault();
//Let's call the caduceus server
axios.get(Constants.WS_PREFIX+'companies')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}