JavaScript >> Javascript 文檔 >  >> JavaScript

加快快遞速度的 6 種簡單方法

簡介

由於其簡單的 API、可用的插件和龐大的社區,Express 是迄今為止最受歡迎的 Node.js 網絡框架。感謝社區,不乏有關如何使用核心 Express API 的文檔和示例,這很棒,但隨著 Web 應用程序的增長,如何提高其性能並不總是很清楚。在這裡,我將向您展示一些提高 Express 應用性能的最簡單、最有效的方法。

gzip 壓縮

gzip 壓縮對於 Web 服務器來說並不是什麼新鮮事,但很容易忘記它,尤其是當您習慣使用默認啟用它的框架時。這是非常容易添加的改進之一,它提供了極大的性能提升。壓縮頁面內容可以將頁面大小減少多達 70% .

var compression = require('compression');
var express = require('express');

var app = express();

app.use(compression());

在生產模式下運行 Express

默認情況下,Express 會在開發模式下運行,這很容易被忽視,尤其是對於那些剛開始使用 Node.js/Express 的人。

那麼,生產模式和開發模式到底有什麼區別呢?事實證明,在開發模式下,視圖模板是從每個請求的文件中讀取的,而在生產模式下,模板只加載一次並緩存。這樣做是為了讓您可以輕鬆地進行動態更改,而無需在開發過程中每次都重新啟動應用程序。然而,在生產環境中,這會大大降低您的性能,因為與更快的 RAM 相比,您必須處理慢速文件 IO。

幸運的是,讓 Express 進入生產模式很容易。只需設置一個環境變量即可。

$ export NODE_ENV=production

不過要小心這種方法。如果服務器重新啟動,您將丟失此環境變量並返回使用開發模式。更持久的解決方案是在 .bash_profile 中設置變量 :

$ echo export NODE_ENV=production >> ~/.bash_profile
$ source ~/.bash_profile

用 Uglify 縮小

對於幾乎每個網站,尤其是那些具有大量樣式和客戶端功能的網站,靜態資產可能會嚴重拖累性能。必須為每個請求發送多個 JavaScript 和 CSS 文件最終會對您的服務器造成影響,這甚至還沒有考慮到用戶必須等待所有單獨的 HTTP 請求在客戶端完成的時間。

為了幫助緩解這種情況,您可以使用 Uglify 之類的實用程序包來縮小和連接您的 JavaScript 和 CSS 文件。將此與 Grunt 之類的任務運行程序結合使用,您將能夠輕鬆地自動化該過程,而不必擔心它。一個相當強大的 Grunt 文件(使用 grunt-contrib-uglify 插件)可能看起來像這樣:

module.exports = function(grunt) {

	grunt.initConfig({
		uglify: {
			options: {
				banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
			},
			dist: {
				files: {
					'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
				}
			}
    	}
	});

	grunt.loadNpmTasks('grunt-contrib-uglify');
	grunt.registerTask('default', ['uglify']);
};

減少中間件

我並不是說你永遠不應該使用中間件,顯然這是必要的,並且有很多理由在你的 Express 應用程序中使用中間件,但是很容易過度複製你看到其他應用程序使用的所有中間件。查看您的依賴項列表並確定您是否真的需要已安裝的所有內容(cookie、會話、i18n、請求記錄器等)。

在某些情況下,您只需要中間件包進行開發,因此您可以在生產環境中輕鬆禁用它們:

var express = require('express');
var debugMiddleware = require('my-debug-middleware');

var app = express();

if (process.env.NODE_ENV !== 'production') {
	app.use(debugMiddleware());
}

增加最大套接字數

默認情況下,Node.js HTTP 服務器的套接字池限制只有 5 個。這是一個非常保守的數字,大多數服務器可以處理比這更多的套接字。

或者,您可以允許盡可能多的套接字:

var http = require('http');
var https = require('https');

http.globalAgent.maxSockets = Infinity;
https.globalAgent.maxSockets = Infinity;

使用緩存控制

您可以設置一個 HTTP 標頭,告訴用戶的瀏覽器緩存它剛剛收到的內容。對於不經常更改的靜態資產(JS、CSS 等),這通常是一個好主意。要分配應用程序範圍的緩存設置,請使用:

免費電子書:Git Essentials

查看我們的 Git 學習實踐指南,其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它!

var express = require('express');
var app = express();

app.use(express.static(__dirname + '/public', { maxAge: 31557600 }));

這將為 public 中的所有內容分配緩存設置 目錄。對於更細粒度的控制,您可以根據單個請求/路由設置緩存:

var express = require('express');
var app = express();

app.get('/index.html', function (req, res) {
	res.setHeader('Cache-Control', 'public, max-age=86400');
	res.render('index.html');
});

結論

請記住,您可以通過瀏覽開源網站(例如 Ghost 博客平台)找到一些很棒的技巧。這些應用程序由成千上萬的人開發和使用,因此您通常可以找到一些您不會聽到的非常有用的片段。

您可以在 Express 之外做很多事情來加快速度,因此,如果您還沒有,請查看 Redis、Nginx 和其他緩存機制來提升您的應用程序。相信我,這值得你花時間。

還有更多 Express 性能提示嗎?請在評論中告訴我們!


Tutorial JavaScript 教程
  1. 帶有 React 和 Codesphere 的語音自動化 Spotify

  2. 如何處理 Javascript fetch() 中的 4xx 和 5xx 錯誤

  3. React 面試問題 - 基本

  4. 如何將 Javascript 中的日誌字符串解析為 JSON

  5. 揭示 JavaScript 的“this”關鍵字的內部工作原理

  6. 🎂 慶祝阿姆斯特丹 React 峰會五週年

  7. 在企業環境中使用 Angular 表單

  1. 這是一個 GitHub Action,它使用用戶最近的活動更新 README

  2. 10 個新的隨機 jQuery 插件:2013 年 10 月版

  3. 陰影 DOM 樣式

  4. onDestroy() 生命週期函數如何在 Svelte 中工作?

  5. 電子冒險:第 24 集:單元測試電子

  6. Zepto.js 的要點

  7. 對於每個觸發器,如何在其觸發器上動態顯示 bootstrap-5 模態位置

  1. 開源 JavaScript 數據結構和算法

  2. 瀑布下的火焰派:快速定位網站性能問題的三個步驟

  3. 介紹 DevMeetup:我致力於社區的新項目 🚀

  4. Shiba Every Hour - 由 GitHub Actions 提供支持的 Twitter 機器人