Mengoptimalkan Pemrosesan dan Penyimpanan File Excel Besar di Aplikasi Web Stack MERN

Solusi 1: Menyimpan File Excel sebagai JSON di MongoDB (Frontend dan Backend)

Solusi ini menggunakan pendekatan dasar dimana kami mengonversi data Excel ke JSON di frontend dan menyimpannya di MongoDB. Skrip ini membantu dengan file kecil tetapi mungkin tidak dapat diskalakan dengan baik dengan file besar (di atas 16 MB). Ini bagus untuk pengaturan dasar di mana skalabilitas tidak menjadi masalah.

// Frontend: Handle File Upload and Convert to JSONconst handleFileUpload = (event) => {    const file = event.target.files[0];    if (file) {        const reader = new FileReader();        reader.onload = async (e) => {            const data = new Uint8Array(e.target.result);            const workbook = XLSX.read(data, { type: 'array' });            const json = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]);                        // Send JSON data to backend            await fetch('/api/uploadExcel', {                method: 'POST',                headers: { 'Content-Type': 'application/json' },                body: JSON.stringify({ fileData: json })            });        };        reader.readAsArrayBuffer(file);    }};// Backend: Express API to Store Data in MongoDBconst express = require('express');const mongoose = require('mongoose');const app = express();mongoose.connect('mongodb://localhost:27017/exceldb', { useNewUrlParser: true, useUnifiedTopology: true });const fileSchema = new mongoose.Schema({ data: Array });const File = mongoose.model('File', fileSchema);app.use(express.json());app.post('/api/uploadExcel', async (req, res) => {    try {        const newFile = new File({ data: req.body.fileData });        await newFile.save();        res.status(200).send('File uploaded successfully!');    } catch (error) {        res.status(500).send('Error uploading file');    }});app.listen(5000, () => {    console.log('Server running on port 5000');});

Solusi 2: Menggunakan GridFS untuk Menyimpan File Excel Besar di MongoDB

Dalam pendekatan ini, kami menggunakan GridFS untuk menyimpan file Excel besar sebagai potongan di MongoDB. Ini memungkinkan kami menangani file yang lebih besar dari 16MB. Setelah menyimpan file, frontend mengambilnya dan mengubahnya menjadi JSON untuk diproses.

// Frontend: Handle File Upload Using FormDataconst handleFileUpload = async (event) => {    const file = event.target.files[0];    if (file) {        const formData = new FormData();        formData.append('file', file);                // Send file to backend        await fetch('/api/uploadExcel', {            method: 'POST',            body: formData        });    }};// Backend: Express API to Store Excel File in GridFSconst express = require('express');const mongoose = require('mongoose');const multer = require('multer');const { GridFSBucket } = require('mongodb');const app = express();mongoose.connect('mongodb://localhost:27017/exceldb', { useNewUrlParser: true, useUnifiedTopology: true });const storage = multer.memoryStorage();const upload = multer({ storage: storage });app.post('/api/uploadExcel', upload.single('file'), (req, res) => {    const bucket = new GridFSBucket(mongoose.connection.db, { bucketName: 'excelFiles' });    const uploadStream = bucket.openUploadStream(req.file.originalname);    uploadStream.end(req.file.buffer);        res.status(200).send('File uploaded successfully!');});// Backend: Retrieve and Convert Excel File to JSONapp.get('/api/getExcel/:filename', (req, res) => {    const bucket = new GridFSBucket(mongoose.connection.db, { bucketName: 'excelFiles' });    const downloadStream = bucket.openDownloadStreamByName(req.params.filename);    const chunks = [];    downloadStream.on('data', (chunk) => chunks.push(chunk));    downloadStream.on('end', () => {        const buffer = Buffer.concat(chunks);        const workbook = XLSX.read(buffer, { type: 'buffer' });        const json = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]);        res.json(json);    });});app.listen(5000, () => {    console.log('Server running on port 5000');});

Solusi 3: Pemrosesan sisi server untuk Mengoptimalkan Kinerja

Solusi ini meningkatkan kinerja dengan mengalihkan konversi JSON dari frontend ke backend. Hal ini memastikan frontend tidak mengalami waktu pemrosesan file yang besar, dan memungkinkan konversi file yang lebih cepat untuk kumpulan data yang besar.

// Backend: Express API to Handle File Conversion and Calculationconst express = require('express');const mongoose = require('mongoose');const { GridFSBucket } = require('mongodb');const XLSX = require('xlsx');const app = express();mongoose.connect('mongodb://localhost:27017/exceldb', { useNewUrlParser: true, useUnifiedTopology: true });app.post('/api/uploadExcel', upload.single('file'), (req, res) => {    const bucket = new GridFSBucket(mongoose.connection.db, { bucketName: 'excelFiles' });    const uploadStream = bucket.openUploadStream(req.file.originalname);    uploadStream.end(req.file.buffer);        res.status(200).send('File uploaded successfully!');});// Backend: Retrieve, Convert, and Process Excel Fileapp.get('/api/getProcessedExcel/:filename', (req, res) => {    const bucket = new GridFSBucket(mongoose.connection.db, { bucketName: 'excelFiles' });    const downloadStream = bucket.openDownloadStreamByName(req.params.filename);    const chunks = [];    downloadStream.on('data', (chunk) => chunks.push(chunk));    downloadStream.on('end', () => {        const buffer = Buffer.concat(chunks);        const workbook = XLSX.read(buffer, { type: 'buffer' });        const sheet = workbook.Sheets[workbook.SheetNames[0]];        const json = XLSX.utils.sheet_to_json(sheet);                // Process data to calculate sum, average, etc.        const processedData = json.map(row => ({            ...row,            sum: row.values.reduce((a, b) => a + b, 0),            average: row.values.reduce((a, b) => a + b, 0) / row.values.length        }));        res.json(processedData);    });});app.listen(5000, () => {    console.log('Server running on port 5000');});

Pertanyaan Umum tentang Menangani File Excel Besar di MERN Stack

1. Bagaimana cara menghindari batas ukuran BSON di MongoDB saat menyimpan file besar?
2. Untuk melewati batas ukuran BSON di MongoDB, Anda dapat menggunakan GridFS, yang memungkinkan Anda menyimpan file besar dalam beberapa bagian, secara efisien menangani file yang melebihi batas ukuran BSON 16 MB.
3. Apa praktik terbaik untuk mengoptimalkan kinerja frontend saat memproses file Excel berukuran besar?
4. Untuk mengoptimalkan kinerja frontend, pertimbangkan untuk memindahkan tugas pemrosesan dan perhitungan file ke backend. Hal ini akan mengurangi beban pada browser klien, memastikan pengalaman pengguna yang lebih lancar.
5. Bagaimana cara meningkatkan kecepatan konversi file Excel besar ke JSON?
6. Salah satu cara untuk mempercepat proses konversi adalah dengan memecah file menjadi potongan-potongan kecil dan memprosesnya secara asinkron. Selain itu, memanfaatkan perpustakaan yang efisien atau menggunakan layanan backend untuk konversi dapat mengurangi waktu yang dibutuhkan secara signifikan.
7. Apakah ada cara untuk menangani perhitungan real-time pada file Excel yang besar?
8. Penghitungan waktu nyata dapat dilakukan dengan menggunakan pemrosesan sisi server untuk agregasi data (jumlah, rata-rata, maks, min). Hal ini akan mengurangi waktu yang dihabiskan untuk memproses data di frontend dan meningkatkan daya tanggap.
9. Apa metode terbaik untuk menyimpan file Excel berukuran besar yang sering diakses?
10. Jika file Excel Anda berukuran besar dan memerlukan akses sering, GridFS adalah pilihan yang sangat baik. Ini memastikan penyimpanan dan pengambilan yang efisien dengan membagi file menjadi bagian-bagian yang lebih kecil dan mudah dikelola.
11. Bisakah saya menerapkan penomoran halaman untuk file Excel berukuran besar di aplikasi web saya?
12. Ya, penerapan penomoran halaman dapat membantu mengoptimalkan kinerja. Anda dapat mengambil dan memproses subkumpulan data yang lebih kecil, sehingga membuat aplikasi lebih responsif dan mengurangi waktu pemuatan awal.
13. Bagaimana MongoDB GridFS meningkatkan penanganan file Excel berukuran besar?
14. GridFS menyimpan file dalam potongan kecil, sehingga memungkinkan untuk menyimpan file yang lebih besar dari batas 16 MB yang diberlakukan oleh MongoDB. Ini sangat berguna ketika menangani kumpulan data besar seperti file Excel.
15. Langkah apa yang harus saya ambil untuk mencegah batas waktu saat memproses file Excel berukuran besar?
16. Untuk mencegah waktu habis, Anda dapat membagi pemrosesan file menjadi tugas-tugas yang lebih kecil, menggunakan pekerja latar belakang atau antrean untuk memproses, dan mengoptimalkan kode sisi server untuk menangani data secara efisien.
17. Bagaimana cara mengurangi penggunaan memori frontend saat menangani file Excel berukuran besar?
18. Untuk mengurangi penggunaan memori frontend, Anda bisa menerapkan streaming dan pemotongan untuk file Excel, memproses bagian file yang lebih kecil dalam satu waktu, daripada memuat semuanya ke dalam memori sekaligus.

Mengoptimalkan Penanganan File Excel Besar di Aplikasi MERN Stack Anda

Untuk menyimpan dan mengambil file Excel besar secara efisien di aplikasi tumpukan MERN, Anda harus mempertimbangkan untuk menggunakan GridFS untuk MongoDB, yang menangani file yang lebih besar dari batas ukuran BSON 16MB. Mengonversi file Excel langsung ke JSON dan menyimpannya dapat menyebabkan hambatan kinerja, terutama saat menangani kumpulan data yang besar. Membongkar pemrosesan dan penghitungan file ke backend akan mengurangi beban frontend dan memberikan waktu pemrosesan yang lebih cepat bagi pengguna.

Selain itu, penerapan teknik seperti pengelompokan data dan penomoran halaman di frontend dapat memastikan bahwa hanya sebagian data yang dapat dikelola yang diproses pada waktu tertentu. Hal ini mengurangi konsumsi memori dan membantu mencegah batas waktu. Dengan mengoptimalkan penyimpanan backend dan penanganan data frontend, aplikasi web tumpukan MERN Anda dapat menskalakan secara efisien untuk menangani file Excel besar dengan ribuan baris. 🚀