mirror of
https://github.com/sourcegraph/sourcegraph.git
synced 2026-02-06 14:51:44 +00:00
de613e92b6
Use [esbuild](https://esbuild.github.io/) instead of Webpack for builds of `client/web`, for faster builds (dev and prod) and greater dev-prod parity. This PR completely removes all use of Webpack in this repository. `client/web` is the last build target that still uses Webpack; all others have been recently migrated to esbuild. Most devs here have been using esbuild for local dev of `client/web` for the last 6-12 months anyway. The change here is that now our production builds will be built by esbuild. All sg commands, integration/e2e tests, etc., continue to work as-is. The bundlesize report will take a while to stabilize because the new build products use different filenames. ## Benchmarks Running `pnpm run generate && time pnpm -C client/web run task:gulp webBuild` and taking the `time` output from the last command: - Webpack: 62.5s - esbuild: 6.7s Note: This understates esbuild's victory for 2 reasons: (1) because esbuild is building both the main and embed entrypoints, whereas Webpack only builds the main entrypoint in this benchmark) and (2) because a lot of it is in the fixed startup time of `gulp`; esbuild incremental rebuilds during local dev only take ~1s. ## Notes We no longer use Babel to produce web builds (we use esbuild), so we don't need any Babel plugins that optimize the output or improve browser compatibility. Right now, Babel is only used by Jest (for tests) and by Bazel as an intermediate step.
76 lines
2.6 KiB
TypeScript
76 lines
2.6 KiB
TypeScript
import { readFileSync } from 'fs'
|
|
import path from 'path'
|
|
|
|
import type { SourcegraphContext } from '../../src/jscontext'
|
|
import { assetPathPrefix, WEB_BUILD_MANIFEST_FILENAME, type WebBuildManifest } from '../esbuild/manifest'
|
|
|
|
import { createJsContext, ENVIRONMENT_CONFIG, HTTPS_WEB_SERVER_URL } from '.'
|
|
|
|
const { STATIC_ASSETS_PATH } = ENVIRONMENT_CONFIG
|
|
|
|
const WEB_BUILD_MANIFEST_PATH = path.resolve(STATIC_ASSETS_PATH, WEB_BUILD_MANIFEST_FILENAME)
|
|
export const HTML_INDEX_PATH = path.resolve(STATIC_ASSETS_PATH, 'index.html')
|
|
|
|
export const getWebBuildManifest = (): WebBuildManifest =>
|
|
JSON.parse(readFileSync(WEB_BUILD_MANIFEST_PATH, 'utf-8')) as WebBuildManifest
|
|
|
|
interface GetHTMLPageOptions {
|
|
manifestFile: WebBuildManifest
|
|
/**
|
|
* Used to inject dummy `window.context` in integration tests.
|
|
*/
|
|
jsContext?: SourcegraphContext
|
|
/**
|
|
* Used to inject `window.context` received from the API proxy.
|
|
*/
|
|
jsContextScript?: string
|
|
}
|
|
|
|
/**
|
|
* Returns an HTML page similar to `cmd/frontend/internal/app/ui/app.html` but when running
|
|
* without the `frontend` service.
|
|
*
|
|
* Note: This page should be kept as close as possible to `app.html` to avoid any inconsistencies
|
|
* between our development server and the actual production server.
|
|
*/
|
|
export function getIndexHTML(options: GetHTMLPageOptions): string {
|
|
const { manifestFile, jsContext, jsContextScript } = options
|
|
|
|
const { 'main.js': mainJS, 'main.css': mainCSS } = manifestFile
|
|
|
|
return `
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>Sourcegraph</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, viewport-fit=cover" />
|
|
<meta name="referrer" content="origin-when-cross-origin"/>
|
|
<meta name="color-scheme" content="light dark"/>
|
|
<link rel="stylesheet" href="${assetPathPrefix}/${mainCSS}">
|
|
${
|
|
ENVIRONMENT_CONFIG.SOURCEGRAPHDOTCOM_MODE
|
|
? '<script src="https://js.sentry-cdn.com/ae2f74442b154faf90b5ff0f7cd1c618.min.js" crossorigin="anonymous"></script>'
|
|
: ''
|
|
}
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
<script>
|
|
${
|
|
jsContextScript ||
|
|
`
|
|
// Required mock of the JS context object.
|
|
window.context = ${JSON.stringify(
|
|
jsContext ?? createJsContext({ sourcegraphBaseUrl: `${HTTPS_WEB_SERVER_URL}` })
|
|
)}
|
|
`
|
|
}
|
|
</script>
|
|
|
|
<script src="${assetPathPrefix}/${mainJS}" type="module"></script>
|
|
</body>
|
|
</html>
|
|
`
|
|
}
|