Skip to content
Snippets Groups Projects
Commit 4e6d88f9 authored by Oshani Weerakoon's avatar Oshani Weerakoon
Browse files

updated instructions

parent 12b0a970
No related branches found
No related tags found
No related merge requests found
## Background
Bundling is a process of combining multiple files into a single file, usually to reduce the number of HTTP requests and to optimize the file size. When working with JavaScript, bundling also provides an opportunity to "tree-shake" or remove unused code, thus ensuring only the necessary code is shipped to the end user. This not only improves performance but also reduces energy consumption, which indirectly contributes to lowering carbon emissions.
For this example, we will use **Webpack** as our bundler. Webpack is a popular tool that can bundle, minify, and transpile your JavaScript code, among other things.
For this example, we'll use **Webpack** as our bundler. Webpack is a popular tool that can bundle, minify, and transpile your JavaScript code, among other things.
### Step 1: Setting up Webpack
......
To test the compression functionality of our simple Express server, you can:
## Background
1. **Run the Server**:
First, make sure the server is running. If it's not running already, start it with:
```bash
node yourServerFileName.js
```
For this example, we'll use Node.js with the Express framework to create a simple server that compresses the data before sending it. We'll use the `compression` middleware for Express, which provides gzip compression.
2. **Use a Browser**:
Open a web browser and navigate to `http://localhost:3000`. You won't see any visible difference in the browser, but the data will be compressed during transmission.
### Step 1: Setting up the project
3. **Inspect Network Traffic with Browser Developer Tools**:
To see the compression in action:
1. Initialize a new Node.js project:
- Open the Developer Tools in your browser (usually `F12` or `Ctrl+Shift+I`/`Cmd+Option+I`).
- Go to the 'Network' tab.
- Refresh the page (`http://localhost:3000`).
- Click on the main request (usually listed as `/` or `localhost`).
- Inspect the headers. You should see a `content-encoding` header with the value `gzip`, indicating the data was compressed.
```bash
npm init -y
```
4. **Use `curl` Command**:
You can also use the `curl` command with the `-I` option to fetch only the headers:
2. Install Express and the compression middleware:
```bash
curl -I -H "Accept-Encoding: gzip" http://localhost:3000
npm install express compression
```
In the returned headers, you should see:
### Step 2: Create a simple Express server with compression
```
Content-Encoding: gzip
```
```javascript
const express = require('express');
const compression = require('compression');
This indicates that the server is sending compressed data.
const app = express();
5. **Compare Sizes**:
To see the size difference:
// Use compression middleware
app.use(compression());
- Use `curl` without accepting gzip encoding:
```bash
curl http://localhost:3000 > uncompressed.txt
```
- Use `curl` with gzip encoding:
```bash
curl -H "Accept-Encoding: gzip" http://localhost:3000 > compressed.gz
app.get('/', (req, res) => {
const largeData = Array(5000).fill("This is a repetitive string to simulate large data. ").join('');
res.send(largeData);
});
const PORT = 3000;
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
```
Now, compare the file sizes of `uncompressed.txt` and `compressed.gz`. The compressed file should be significantly smaller.
In this code, the server responds to requests at the root URL with a large repetitive string. By using the `compression` middleware, the data sent in response to a client request will be gzip compressed, reducing its size and, consequently, the energy used for transmission.
### Conclusion
By following these steps, you can verify that the server is compressing data before sending it to clients.
\ No newline at end of file
By compressing data before sending it over the network, we can significantly reduce the amount of data transmitted, leading to energy savings and faster data transfer. While not all data types are compressible, for those that are, using compression can be a valuable green programming practice.
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment