220 lines
		
	
	
		
			5.2 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			220 lines
		
	
	
		
			5.2 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
| "use strict";
 | |
| 
 | |
| const path = require('path');
 | |
| 
 | |
| const fs = require('fs');
 | |
| 
 | |
| const http = require('http');
 | |
| 
 | |
| const WebSocket = require('ws');
 | |
| 
 | |
| const sirv = require('sirv');
 | |
| 
 | |
| const {
 | |
|   bold
 | |
| } = require('picocolors');
 | |
| 
 | |
| const Logger = require('./Logger');
 | |
| 
 | |
| const analyzer = require('./analyzer');
 | |
| 
 | |
| const {
 | |
|   open
 | |
| } = require('./utils');
 | |
| 
 | |
| const {
 | |
|   renderViewer
 | |
| } = require('./template');
 | |
| 
 | |
| const projectRoot = path.resolve(__dirname, '..');
 | |
| 
 | |
| function resolveTitle(reportTitle) {
 | |
|   if (typeof reportTitle === 'function') {
 | |
|     return reportTitle();
 | |
|   } else {
 | |
|     return reportTitle;
 | |
|   }
 | |
| }
 | |
| 
 | |
| module.exports = {
 | |
|   startServer,
 | |
|   generateReport,
 | |
|   generateJSONReport,
 | |
|   getEntrypoints,
 | |
|   // deprecated
 | |
|   start: startServer
 | |
| };
 | |
| 
 | |
| async function startServer(bundleStats, opts) {
 | |
|   const {
 | |
|     port = 8888,
 | |
|     host = '127.0.0.1',
 | |
|     openBrowser = true,
 | |
|     bundleDir = null,
 | |
|     logger = new Logger(),
 | |
|     defaultSizes = 'parsed',
 | |
|     excludeAssets = null,
 | |
|     reportTitle,
 | |
|     analyzerUrl
 | |
|   } = opts || {};
 | |
|   const analyzerOpts = {
 | |
|     logger,
 | |
|     excludeAssets
 | |
|   };
 | |
|   let chartData = getChartData(analyzerOpts, bundleStats, bundleDir);
 | |
|   const entrypoints = getEntrypoints(bundleStats);
 | |
|   if (!chartData) return;
 | |
|   const sirvMiddleware = sirv(`${projectRoot}/public`, {
 | |
|     // disables caching and traverse the file system on every request
 | |
|     dev: true
 | |
|   });
 | |
|   const server = http.createServer((req, res) => {
 | |
|     if (req.method === 'GET' && req.url === '/') {
 | |
|       const html = renderViewer({
 | |
|         mode: 'server',
 | |
|         title: resolveTitle(reportTitle),
 | |
|         chartData,
 | |
|         entrypoints,
 | |
|         defaultSizes,
 | |
|         enableWebSocket: true
 | |
|       });
 | |
|       res.writeHead(200, {
 | |
|         'Content-Type': 'text/html'
 | |
|       });
 | |
|       res.end(html);
 | |
|     } else {
 | |
|       sirvMiddleware(req, res);
 | |
|     }
 | |
|   });
 | |
|   await new Promise(resolve => {
 | |
|     server.listen(port, host, () => {
 | |
|       resolve();
 | |
|       const url = analyzerUrl({
 | |
|         listenPort: port,
 | |
|         listenHost: host,
 | |
|         boundAddress: server.address()
 | |
|       });
 | |
|       logger.info(`${bold('Webpack Bundle Analyzer')} is started at ${bold(url)}\n` + `Use ${bold('Ctrl+C')} to close it`);
 | |
| 
 | |
|       if (openBrowser) {
 | |
|         open(url, logger);
 | |
|       }
 | |
|     });
 | |
|   });
 | |
|   const wss = new WebSocket.Server({
 | |
|     server
 | |
|   });
 | |
|   wss.on('connection', ws => {
 | |
|     ws.on('error', err => {
 | |
|       // Ignore network errors like `ECONNRESET`, `EPIPE`, etc.
 | |
|       if (err.errno) return;
 | |
|       logger.info(err.message);
 | |
|     });
 | |
|   });
 | |
|   return {
 | |
|     ws: wss,
 | |
|     http: server,
 | |
|     updateChartData
 | |
|   };
 | |
| 
 | |
|   function updateChartData(bundleStats) {
 | |
|     const newChartData = getChartData(analyzerOpts, bundleStats, bundleDir);
 | |
|     if (!newChartData) return;
 | |
|     chartData = newChartData;
 | |
|     wss.clients.forEach(client => {
 | |
|       if (client.readyState === WebSocket.OPEN) {
 | |
|         client.send(JSON.stringify({
 | |
|           event: 'chartDataUpdated',
 | |
|           data: newChartData
 | |
|         }));
 | |
|       }
 | |
|     });
 | |
|   }
 | |
| }
 | |
| 
 | |
| async function generateReport(bundleStats, opts) {
 | |
|   const {
 | |
|     openBrowser = true,
 | |
|     reportFilename,
 | |
|     reportTitle,
 | |
|     bundleDir = null,
 | |
|     logger = new Logger(),
 | |
|     defaultSizes = 'parsed',
 | |
|     excludeAssets = null
 | |
|   } = opts || {};
 | |
|   const chartData = getChartData({
 | |
|     logger,
 | |
|     excludeAssets
 | |
|   }, bundleStats, bundleDir);
 | |
|   const entrypoints = getEntrypoints(bundleStats);
 | |
|   if (!chartData) return;
 | |
|   const reportHtml = renderViewer({
 | |
|     mode: 'static',
 | |
|     title: resolveTitle(reportTitle),
 | |
|     chartData,
 | |
|     entrypoints,
 | |
|     defaultSizes,
 | |
|     enableWebSocket: false
 | |
|   });
 | |
|   const reportFilepath = path.resolve(bundleDir || process.cwd(), reportFilename);
 | |
|   fs.mkdirSync(path.dirname(reportFilepath), {
 | |
|     recursive: true
 | |
|   });
 | |
|   fs.writeFileSync(reportFilepath, reportHtml);
 | |
|   logger.info(`${bold('Webpack Bundle Analyzer')} saved report to ${bold(reportFilepath)}`);
 | |
| 
 | |
|   if (openBrowser) {
 | |
|     open(`file://${reportFilepath}`, logger);
 | |
|   }
 | |
| }
 | |
| 
 | |
| async function generateJSONReport(bundleStats, opts) {
 | |
|   const {
 | |
|     reportFilename,
 | |
|     bundleDir = null,
 | |
|     logger = new Logger(),
 | |
|     excludeAssets = null
 | |
|   } = opts || {};
 | |
|   const chartData = getChartData({
 | |
|     logger,
 | |
|     excludeAssets
 | |
|   }, bundleStats, bundleDir);
 | |
|   if (!chartData) return;
 | |
|   await fs.promises.mkdir(path.dirname(reportFilename), {
 | |
|     recursive: true
 | |
|   });
 | |
|   await fs.promises.writeFile(reportFilename, JSON.stringify(chartData));
 | |
|   logger.info(`${bold('Webpack Bundle Analyzer')} saved JSON report to ${bold(reportFilename)}`);
 | |
| }
 | |
| 
 | |
| function getChartData(analyzerOpts, ...args) {
 | |
|   let chartData;
 | |
|   const {
 | |
|     logger
 | |
|   } = analyzerOpts;
 | |
| 
 | |
|   try {
 | |
|     chartData = analyzer.getViewerData(...args, analyzerOpts);
 | |
|   } catch (err) {
 | |
|     logger.error(`Could't analyze webpack bundle:\n${err}`);
 | |
|     logger.debug(err.stack);
 | |
|     chartData = null;
 | |
|   } // chartData can either be an array (bundleInfo[]) or null. It can't be an plain object anyway
 | |
| 
 | |
| 
 | |
|   if ( // analyzer.getViewerData() doesn't failed in the previous step
 | |
|   chartData && !Array.isArray(chartData)) {
 | |
|     logger.error("Could't find any javascript bundles in provided stats file");
 | |
|     chartData = null;
 | |
|   }
 | |
| 
 | |
|   return chartData;
 | |
| }
 | |
| 
 | |
| function getEntrypoints(bundleStats) {
 | |
|   if (bundleStats === null || bundleStats === undefined || !bundleStats.entrypoints) {
 | |
|     return [];
 | |
|   }
 | |
| 
 | |
|   return Object.values(bundleStats.entrypoints).map(entrypoint => entrypoint.name);
 | |
| } |