Migrate from webpack to vite (#37002)
Replace webpack with Vite 8 as the frontend bundler. Frontend build is around 3-4 times faster than before. Will work on all platforms including riscv64 (via wasm). `iife.js` is a classic render-blocking script in `<head>` (handles web components/early DOM setup). `index.js` is loaded as a `type="module"` script in the footer. All other JS chunks are also module scripts (supported in all browsers since 2018). Entry filenames are content-hashed (e.g. `index.C6Z2MRVQ.js`) and resolved at runtime via the Vite manifest, eliminating the `?v=` cache busting (which was unreliable in some scenarios like vscode dev build). Replaces: https://github.com/go-gitea/gitea/pull/36896 Fixes: https://github.com/go-gitea/gitea/issues/17793 Signed-off-by: silverwind <me@silverwind.io> Signed-off-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: Claude (Opus 4.6) <noreply@anthropic.com> Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
silverwind
GitHub
@@ -34,7 +34,7 @@ export async function initCaptcha() {
|
||||
break;
|
||||
}
|
||||
case 'm-captcha': {
|
||||
const mCaptcha = await import(/* webpackChunkName: "mcaptcha-vanilla-glue" */'@mcaptcha/vanilla-glue');
|
||||
const mCaptcha = await import('@mcaptcha/vanilla-glue');
|
||||
|
||||
// FIXME: the mCaptcha code is not right, it's a miracle that the wrong code could run
|
||||
// * the "vanilla-glue" has some problems with es6 module.
|
||||
|
||||
@@ -6,10 +6,10 @@ const {pageData} = window.config;
|
||||
|
||||
async function initInputCitationValue(citationCopyApa: HTMLButtonElement, citationCopyBibtex: HTMLButtonElement) {
|
||||
const [{Cite, plugins}] = await Promise.all([
|
||||
import(/* webpackChunkName: "citation-js-core" */'@citation-js/core'),
|
||||
import(/* webpackChunkName: "citation-js-formats" */'@citation-js/plugin-software-formats'),
|
||||
import(/* webpackChunkName: "citation-js-bibtex" */'@citation-js/plugin-bibtex'),
|
||||
import(/* webpackChunkName: "citation-js-csl" */'@citation-js/plugin-csl'),
|
||||
import('@citation-js/core'),
|
||||
import('@citation-js/plugin-software-formats'),
|
||||
import('@citation-js/plugin-bibtex'),
|
||||
import('@citation-js/plugin-csl'),
|
||||
]);
|
||||
const citationFileContent = pageData.citationFileContent!;
|
||||
const config = plugins.config.get('@bibtex');
|
||||
|
||||
@@ -4,7 +4,7 @@ export async function initRepoCodeFrequency() {
|
||||
const el = document.querySelector('#repo-code-frequency-chart');
|
||||
if (!el) return;
|
||||
|
||||
const {default: RepoCodeFrequency} = await import(/* webpackChunkName: "code-frequency-graph" */'../components/RepoCodeFrequency.vue');
|
||||
const {default: RepoCodeFrequency} = await import('../components/RepoCodeFrequency.vue');
|
||||
try {
|
||||
const View = createApp(RepoCodeFrequency, {
|
||||
locale: {
|
||||
|
||||
@@ -129,7 +129,7 @@ function updateTheme(monaco: Monaco): void {
|
||||
type CreateMonacoOpts = MonacoOpts & {language?: string};
|
||||
|
||||
export async function createMonaco(textarea: HTMLTextAreaElement, filename: string, opts: CreateMonacoOpts): Promise<{monaco: Monaco, editor: IStandaloneCodeEditor}> {
|
||||
const monaco = await import(/* webpackChunkName: "monaco" */'monaco-editor');
|
||||
const monaco = await import('../modules/monaco.ts');
|
||||
|
||||
initLanguages(monaco);
|
||||
let {language, ...other} = opts;
|
||||
|
||||
@@ -6,8 +6,8 @@ export async function initColorPickers() {
|
||||
registerGlobalInitFunc('initColorPicker', async (el) => {
|
||||
if (!imported) {
|
||||
await Promise.all([
|
||||
import(/* webpackChunkName: "colorpicker" */'vanilla-colorful/hex-color-picker.js'),
|
||||
import(/* webpackChunkName: "colorpicker" */'../../css/features/colorpicker.css'),
|
||||
import('vanilla-colorful/hex-color-picker.js'),
|
||||
import('../../css/features/colorpicker.css'),
|
||||
]);
|
||||
imported = true;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import {GET, POST} from '../modules/fetch.ts';
|
||||
import {showGlobalErrorMessage} from '../bootstrap.ts';
|
||||
import {showGlobalErrorMessage} from '../modules/errors.ts';
|
||||
import {fomanticQuery} from '../modules/fomantic/base.ts';
|
||||
import {addDelegatedEventListener, queryElems} from '../utils/dom.ts';
|
||||
import {registerGlobalInitFunc, registerGlobalSelectorFunc} from '../modules/observer.ts';
|
||||
|
||||
@@ -319,8 +319,8 @@ export class ComboMarkdownEditor {
|
||||
async switchToEasyMDE() {
|
||||
if (this.easyMDE) return;
|
||||
const [{default: EasyMDE}] = await Promise.all([
|
||||
import(/* webpackChunkName: "easymde" */'easymde'),
|
||||
import(/* webpackChunkName: "easymde" */'../../../css/easymde.css'),
|
||||
import('easymde'),
|
||||
import('../../../css/easymde.css'),
|
||||
]);
|
||||
const easyMDEOpt: EasyMDE.Options = {
|
||||
autoDownloadFontAwesome: false,
|
||||
|
||||
@@ -7,7 +7,7 @@ type CropperOpts = {
|
||||
};
|
||||
|
||||
async function initCompCropper({container, fileInput, imageSource}: CropperOpts) {
|
||||
const {default: Cropper} = await import(/* webpackChunkName: "cropperjs" */'cropperjs');
|
||||
const {default: Cropper} = await import('cropperjs');
|
||||
let currentFileName = '';
|
||||
let currentFileLastModified = 0;
|
||||
const cropper = new Cropper(imageSource, {
|
||||
|
||||
@@ -4,7 +4,7 @@ export async function initRepoContributors() {
|
||||
const el = document.querySelector('#repo-contributors-chart');
|
||||
if (!el) return;
|
||||
|
||||
const {default: RepoContributors} = await import(/* webpackChunkName: "contributors-graph" */'../components/RepoContributors.vue');
|
||||
const {default: RepoContributors} = await import('../components/RepoContributors.vue');
|
||||
try {
|
||||
const View = createApp(RepoContributors, {
|
||||
repoLink: el.getAttribute('data-repo-link'),
|
||||
|
||||
@@ -19,8 +19,8 @@ export const DropzoneCustomEventUploadDone = 'dropzone-custom-upload-done';
|
||||
|
||||
async function createDropzone(el: HTMLElement, opts: DropzoneOptions) {
|
||||
const [{default: Dropzone}] = await Promise.all([
|
||||
import(/* webpackChunkName: "dropzone" */'dropzone'),
|
||||
import(/* webpackChunkName: "dropzone" */'dropzone/dist/dropzone.css'),
|
||||
import('dropzone'),
|
||||
import('dropzone/dist/dropzone.css'),
|
||||
]);
|
||||
return new Dropzone(el, opts);
|
||||
}
|
||||
|
||||
@@ -45,7 +45,7 @@ export async function initHeatmap() {
|
||||
noDataText: el.getAttribute('data-locale-no-contributions'),
|
||||
};
|
||||
|
||||
const {default: ActivityHeatmap} = await import(/* webpackChunkName: "ActivityHeatmap" */ '../components/ActivityHeatmap.vue');
|
||||
const {default: ActivityHeatmap} = await import('../components/ActivityHeatmap.vue');
|
||||
const View = createApp(ActivityHeatmap, {values, locale});
|
||||
View.mount(el);
|
||||
el.classList.remove('is-loading');
|
||||
|
||||
@@ -4,7 +4,7 @@ export async function initRepoRecentCommits() {
|
||||
const el = document.querySelector('#repo-recent-commits-chart');
|
||||
if (!el) return;
|
||||
|
||||
const {default: RepoRecentCommits} = await import(/* webpackChunkName: "recent-commits-graph" */'../components/RepoRecentCommits.vue');
|
||||
const {default: RepoRecentCommits} = await import('../components/RepoRecentCommits.vue');
|
||||
try {
|
||||
const View = createApp(RepoRecentCommits, {
|
||||
locale: {
|
||||
|
||||
@@ -69,7 +69,7 @@ export function filterRepoFilesWeighted(files: Array<string>, filter: string) {
|
||||
|
||||
export function initRepoFileSearch() {
|
||||
registerGlobalInitFunc('initRepoFileSearch', async (el) => {
|
||||
const {default: RepoFileSearch} = await import(/* webpackChunkName: "RepoFileSearch" */ '../components/RepoFileSearch.vue');
|
||||
const {default: RepoFileSearch} = await import('../components/RepoFileSearch.vue');
|
||||
createApp(RepoFileSearch, {
|
||||
repoLink: el.getAttribute('data-repo-link'),
|
||||
currentRefNameSubURL: el.getAttribute('data-current-ref-name-sub-url'),
|
||||
|
||||
@@ -66,7 +66,7 @@ async function initRepoPullRequestMergeForm(box: HTMLElement) {
|
||||
const el = box.querySelector('#pull-request-merge-form');
|
||||
if (!el) return;
|
||||
|
||||
const {default: PullRequestMergeForm} = await import(/* webpackChunkName: "PullRequestMergeForm" */ '../components/PullRequestMergeForm.vue');
|
||||
const {default: PullRequestMergeForm} = await import('../components/PullRequestMergeForm.vue');
|
||||
const view = createApp(PullRequestMergeForm);
|
||||
view.mount(el);
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@ import type {TributeCollection} from 'tributejs';
|
||||
import type {Mention} from '../types.ts';
|
||||
|
||||
export async function attachTribute(element: HTMLElement) {
|
||||
const {default: Tribute} = await import(/* webpackChunkName: "tribute" */'tributejs');
|
||||
const {default: Tribute} = await import('tributejs');
|
||||
const mentionsUrl = element.closest('[data-mentions-url]')?.getAttribute('data-mentions-url');
|
||||
|
||||
const emojiCollection: TributeCollection<string> = { // emojis
|
||||
|
||||
Reference in New Issue
Block a user