From 42f7c2ad89f7b65ad0c8c35e0c73047c23ea8160 Mon Sep 17 00:00:00 2001 From: Giteabot Date: Wed, 27 Sep 2023 10:26:28 +0800 Subject: [PATCH] Enable production source maps for index.js, fix CSS sourcemaps (#27291) (#27295) Backport #27291 by @silverwind Previously, the production build never output sourcemaps. Now we emit one file for `index.js` because it is the most likely one where we need to be able to better debug reported issues like https://github.com/go-gitea/gitea/issues/27213. This will currently increase the binary size of gitea by around 700kB which is what the gzipped source map file has. Also, I fixed the CSS sourcemap generation which was broken since the introduction of lightningcss. The chinese docs are machine-translated, please correct accordingly. Co-authored-by: silverwind --- .../content/installation/from-source.en-us.md | 10 +++++++-- .../content/installation/from-source.zh-cn.md | 10 +++++++-- webpack.config.js | 21 ++++++++++++------- 3 files changed, 30 insertions(+), 11 deletions(-) diff --git a/docs/content/installation/from-source.en-us.md b/docs/content/installation/from-source.en-us.md index ef720f0824..f6a95e8d0c 100644 --- a/docs/content/installation/from-source.en-us.md +++ b/docs/content/installation/from-source.en-us.md @@ -128,8 +128,6 @@ If pre-built frontend files are present it is possible to only build the backend TAGS="bindata" make backend ``` -Webpack source maps are by default enabled in development builds and disabled in production builds. They can be enabled by setting the `ENABLE_SOURCEMAP=true` environment variable. - ## Test After following the steps above, a `gitea` binary will be available in the working directory. @@ -260,3 +258,11 @@ GOARCH=amd64 \ TAGS="bindata sqlite sqlite_unlock_notify" \ make build ``` + +## Source Maps + +By default, gitea generates reduced source maps for frontend files to conserve space. This can be controlled with the `ENABLE_SOURCEMAP` environment variable: + +- `ENABLE_SOURCEMAP=true` generates all source maps, the default for development builds +- `ENABLE_SOURCEMAP=reduced` generates limited source maps, the default for production builds +- `ENABLE_SOURCEMAP=false` generates no source maps diff --git a/docs/content/installation/from-source.zh-cn.md b/docs/content/installation/from-source.zh-cn.md index 260ccbee3c..74f76652db 100644 --- a/docs/content/installation/from-source.zh-cn.md +++ b/docs/content/installation/from-source.zh-cn.md @@ -100,8 +100,6 @@ TAGS="bindata sqlite sqlite_unlock_notify" make build TAGS="bindata" make backend ``` -在开发构建中,默认启用 Webpack 源映射,在生产构建中禁用。可以通过设置`ENABLE_SOURCEMAP=true`环境变量来启用它们。 - ## 测试 按照上述步骤完成后,工作目录中将会有一个`gitea`二进制文件。可以从该目录进行测试,或将其移动到带有测试数据的目录中。当手动从命令行启动 Gitea 时,可以通过按下`Ctrl + C`来停止程序。 @@ -221,3 +219,11 @@ GOARCH=amd64 \ TAGS="bindata sqlite sqlite_unlock_notify" \ make build ``` + +## 源映射 + +默认情况下,gitea 会为前端文件生成精简的源映射以节省空间。 这可以通过“ENABLE_SOURCEMAP”环境变量进行控制: + +- `ENABLE_SOURCEMAP=true` 生成所有源映射,这是开发版本的默认设置 +- `ENABLE_SOURCEMAP=reduced` 生成有限的源映射,这是生产版本的默认设置 +- `ENABLE_SOURCEMAP=false` 不生成源映射 diff --git a/webpack.config.js b/webpack.config.js index f95296c380..448dc64003 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -28,11 +28,15 @@ for (const path of glob('web_src/css/themes/*.css')) { const isProduction = env.NODE_ENV !== 'development'; -let sourceMapEnabled; +// ENABLE_SOURCEMAP accepts the following values: +// true - all enabled, the default in development +// reduced - minimal sourcemaps, the default in production +// false - all disabled +let sourceMaps; if ('ENABLE_SOURCEMAP' in env) { - sourceMapEnabled = env.ENABLE_SOURCEMAP === 'true'; + sourceMaps = ['true', 'false'].includes(env.ENABLE_SOURCEMAP) ? env.ENABLE_SOURCEMAP : 'reduced'; } else { - sourceMapEnabled = !isProduction; + sourceMaps = isProduction ? 'reduced' : 'true'; } const filterCssImport = (url, ...args) => { @@ -105,7 +109,9 @@ export default { css: !LightningCssMinifyPlugin, legalComments: 'none', }), - LightningCssMinifyPlugin && new LightningCssMinifyPlugin(), + LightningCssMinifyPlugin && new LightningCssMinifyPlugin({ + sourceMap: sourceMaps === 'true', + }), ], splitChunks: { chunks: 'async', @@ -143,7 +149,7 @@ export default { { loader: 'css-loader', options: { - sourceMap: sourceMapEnabled, + sourceMap: sourceMaps === 'true', url: {filter: filterCssImport}, import: {filter: filterCssImport}, }, @@ -181,9 +187,10 @@ export default { filename: 'css/[name].css', chunkFilename: 'css/[name].[contenthash:8].css', }), - sourceMapEnabled && (new SourceMapDevToolPlugin({ + sourceMaps !== 'false' && new SourceMapDevToolPlugin({ filename: '[file].[contenthash:8].map', - })), + ...(sourceMaps === 'reduced' && {include: /^js\/index\.js$/}), + }), new MonacoWebpackPlugin({ filename: 'js/monaco-[name].[contenthash:8].worker.js', }),