前端工程化

如何在项目中合理配置Webpack项目中配置 webpack 有三个目的，打包速度，打包体积，运行流畅度，速度指的是run build的时间，体积是指dist 的大小，流畅指的是打开页面是否不卡顿

使用pnpm搭建你的monorepo三步走24年差不多一整年都在跟pnpm的多包打交道，在公司的两款ai产品中都使用的是pnpm来搭建，其中第三版重构的小程序ai技能也是踩了不少坑（有机会的话后面会写篇文章来探讨下为适应公司ai产品发展方向所设计的前端架构），现在在做的前端工程化从pnpm8升级到pnpm9又是踩了不少坑

前端理想哥

TypeScript入门：三分钟学会可索引类型哈喽，大家好！我是前端理想哥今天是咱们 TS 学习第三课，前两节没听懂的同学别急，今天咱继续冲，这节课我们要聊的内容非常重要：可索引的类型、接口继承、混合类型，还有接口继承类。

领导：按规范提交代码conventionalcommit我的同事们都在努力认真的工作，不放过一分一秒。可是突然到来的会议邀请打断了我们的专注。git 提交规范

前端工程化概述（初版）阅前悉知本文为《前端工程化》系列的首篇。由于本系列仍在撰写中，故其余文章暂不发布。您可以通过此链接查看其余已经完成文章：前端工程化专栏（完善中） | Jay 的博客需要注意的是，尽管部分文章可以查看，但并不代表已经完成，且其中可能存在错误。

没头发的卓卓

pnpm--他简直是超人！pnpm是什么？pnpm比npm多个p，比ppnpm少个p，比pppnpm少两个p。。。。好，言归正传，pnpm的p其实是power的意思，意思是pnpm的超级版，超级在哪呢？

鹿守心畔光

webpack 简介Webpack是一个现代JavaScript应用程序的静态模块打包器（module bundler）。当开发一个复杂的前端项目时，会有许多不同类型的文件，如JavaScript、CSS、图片等，Webpack能够将这些文件视为模块，并按照一定的规则和依赖关系进行处理，最终生成优化后的、可以在浏览器中高效运行的静态资源。

基于 Yjs 的协同方案介绍协同编辑一直是一个技术上具有挑战性的领域，其中数据一致性问题尤为复杂，但随着各种技术迭代，目前已经有了比较成熟的解决方案，下面会介绍介绍 CRDT 以及其开源方案 Yjs 的协同方案，并通过demo 来更好的了解如何快速的构建一个多人协同编辑器

吃饺子不吃馅

一个js库就把你的网页的底裤🩲都扒了——import-html-entryimport-html-entry 是一个用于动态加载和处理 HTML 和 JS 文件的库，主要用于微前端架构中。它能够从远程服务器拉取 HTML 内容，并对其中的 JS 和 CSS 进行处理，以便在主应用中加载和执行。这个库是 qiankun 微前端框架的核心依赖之一，提供了强大的动态加载和执行能力。在微前端框架 qiankun 中，import-html-entry 被用来解决 JS Entry 的问题，通过 HTML Entry 的方式，让用户接入微应用就像使用 iframe 一样简单。

Next.js 中 App 路由和 Pages 路由实现服务端渲染及静态生成方式作为一个成熟的前端开发工程师，服务端渲染是必须要具备技能，服务端渲染在开发 ToC 应用时非常有优势，对比客户端渲染有更好的性能(首屏渲染更快)、搜索引擎优化(SEO)更友好。

光头程序员

工程化开发谷歌插件到底有爽谷歌插件开发本质上就是写一些 html + js + cssmanifest.json 文件剩下核心文件就是一个html 和一个services

对于模块动态加载，Vite 内部做了哪些优化大家好，随着 Vite 的逐渐成熟，越来越多的开发者选择在生产环境中使用 Vite 来构建应用程序。本文将与大家探讨 Vite 是如何处理和优化前端应用中的动态模块加载。

所以pnpm到底比npm&yarn好在哪？假设如下情况项目里引入了一个第三方包这个三方包依赖了100个其他包。因为 npm 和 Yarn 使用的扁平化 node_modules 结构。所有的依赖都是平铺在node_modules中的。

研发效能之规模管理：工程化与系统化的思考随着业务的发展，研发团队和系统架构往往面临一个共同的难题：如何在规模不断扩大的情况下，保持高效、稳定的输出。

我把大型团队项目从 vite 前端迁移到了 rsbuild，收益如何？我们团队的项目一直是使用 vite 作为打包工具的，由于 vite 开发环境和生产环境的打包策略不同（开发环境按需打包，生产环境全量打包），所以存在开发环境和线上环境打包产物表现不一致的风险。其中 css 样式不一致的问题尤为容易发生，目前在需求开发过程中，已多次遇到本地开发环境 css 样式符合 UI 稿，发布到测试环境或者线上之后就出现了差异的场景。

Babel 快速上手Babel 是一个广泛使用的 JavaScript 编译器，它允许开发者编写下一代 JavaScript 代码（如 ES6/ES2015 及更高版本），并将其转换为向后兼容的 JavaScript 代码，以便在各种环境中运行，包括旧版浏览器。

前端工程化3：使用lerna管理多包初始化结构是这样的："pnpm-workspace.yaml" 是 pnpm 管理的多包（monorepo）项目中用于定义工作区设置的文件。如果您在初始化项目时遇到创建这个文件的提示，通常是因为你正在使用支持 pnpm 工作区功能的工具或框架

第一章 Electron快速入门本文所有源码均在：github.com/Sunny-117/e…本文收录在《Electron桌面客户端应用程序开发入门到原理》掘金专栏