1 views collected around this technical thread.
This article explains how to develop a custom plugin that automatically captures Git metadata during build time, injects it into the bundled code, and exposes the information via a console command, with step‑by‑step guidance for both Webpack and Vite projects using Trae‑Builder.
The article introduces auto‑i18n‑translation‑plugins, a Babel‑based automatic internationalization plugin for frontend projects that works with Vite and Webpack, detailing its features, installation, configuration options, translator setup, usage examples, and best practices for generating multilingual JSON translation files without modifying business code.
This article demonstrates how to create a "dist‑info" plugin compatible with Webpack and Vite that automatically injects Git metadata into the built HTML, using the AI‑assisted Trae IDE to scaffold the project, write core code, and publish the package to GitHub and npm.
This article explains why import statements can fill an entire file, examines the problems caused by excessive imports, and presents practical techniques such as module re‑export, require.context, dynamic import, webpack ProvidePlugin, Vite plugins, TypeScript namespaces, aliasing, and Babel plugins to keep import sections concise and maintainable.
The article explains how to build a custom Webpack plugin that uploads compiled static assets to a CDN, rewrites public‑path references to CDN URLs, and employs a hash‑based cache file to skip unchanged files, cutting build time from 40 seconds to 17 seconds in large projects.
The article introduces code‑inspector‑plugin, an open‑source plugin for bundlers like webpack, Vite, and Rspack that lets developers click a DOM element in the browser to instantly open the corresponding source file in their IDE, detailing installation, configuration, usage, implementation principles, and common troubleshooting tips.
Tree shaking in React.js leverages ES6 static imports and named exports to eliminate dead code, reducing bundle size and improving load performance, while best practices such as modular design, avoiding side effects and dynamic imports ensure optimal dead‑code elimination across components and libraries.
This article explains the concepts, rendering strategies, and bundling processes of React Server Components and Server Actions, detailing how Webpack and Turbopack handle module boundaries, code splitting, CSS, SSR, HMR, and how a single compilation can produce both server and client bundles efficiently.
This article compares Rollup and Webpack for bundling JavaScript component libraries, demonstrates how to configure each tool for ESM, CJS, and UMD outputs, shows CSS extraction with plugins versus loaders, and explains why Rollup is preferred for library builds and how Vite leverages it.
This article explains how to detect frontend deployment changes and prompt users to refresh by generating a git‑hash JSON file with git‑revision‑webpack‑plugin, creating Vue mixins for version checking, and comparing hashed filenames in the built index.html, covering three practical solutions with their pros and cons.
This article provides a thorough, English-language guide to optimizing homepage loading speed, covering resource loading techniques, page rendering improvements, and practical Webpack, Nginx, and browser APIs with code examples for developers seeking performance gains.
This article explains what first‑screen optimization is and presents ten practical methods—including resource compression, image optimization, asynchronous loading, preloading, CSS/JS optimization, caching strategies, server‑side rendering, CDN acceleration, and delayed loading—complete with detailed Webpack configurations and code examples to improve initial page render speed.
This article explains why and how to migrate a large Vue 2 Webpack codebase to Vite, applying Simon Sinek's Golden Circle model to clarify motivation, method, and concrete steps, and demonstrates the resulting dramatic reduction in build time and bundle size.
This article explains how to apply Simon Sinek's Golden Circle framework to migrate a large‑scale Webpack‑based frontend project to Vite, detailing the motivations, the faster development experience, step‑by‑step migration procedures, configuration adjustments, and the resulting performance improvements.
This article explains why ESLint is essential for front‑end code quality, describes its core features, and provides a detailed five‑step process for integrating ESLint into Vue 3 projects, followed by deeper integration techniques for Vite, Webpack, CI/CD pipelines, Git hooks, and IDEs, complete with practical code examples and troubleshooting tips.
This article describes how a legacy Vue2‑based cloud management system was profiled with Lighthouse and webpack‑bundle‑analyzer, then optimized through static asset compression, dead‑code removal, tree‑shaking, code‑splitting, async loading and server tweaks, achieving a three‑fold reduction in bundle size and a 13.6‑second improvement in first‑contentful‑paint time.
This guide shows how to speed up Vue‑based web apps by configuring Nginx to serve gzip‑compressed files dynamically and using the compression‑webpack‑plugin to pre‑compress JavaScript and CSS during the build, cutting bundle size from megabytes to a few, and halving page‑load times without extra server load.
Module Federation 2.0, released by ByteDance Web Infra and the original author, introduces best‑practice documentation, runtime‑tool decoupling, TypeScript type safety, a devtool, manifest protocol, and cross‑tool support to make micro‑frontend module sharing more flexible and developer‑friendly.
This article provides a comprehensive walkthrough of Webpack’s internal architecture, detailing the core JavaScript bundling workflow, the roles of Compiler and Compilation objects, the lifecycle of plugins and loaders, the parsing of modules into an AST, chunk creation, and the final emission of assets to the output directory.
This article shares the author's practical experience with frontend engineering, covering topics such as project review, coding standards, monorepo tooling, custom CLI/SDK development, testing strategies, code review, bundling choices, monitoring, performance optimization, and knowledge consolidation for team empowerment.