小秀的博客

new URL和是较优解，前者适合简单场景，后者适用于批量处理。若对文件指纹无要求，可短期使用public目录方案，但需权衡缓存问题。

• 核心指标监控：关注FCP（首次内容渲染）、LCP（最大内容渲染）、CLS（布局偏移）等Web Vitals指标。• CSS/JS压缩：使用工具（如UglifyJS、Terser）去除空格、注释，混淆变量名，减少文件体积。• 优化响应时间：升级服务器硬件、优化数据库查询，减少TTFB（Time to First Byte）。• 服务端渲染（SSR）：通过Next.js、Nuxt.js在服务器生成HTML，减少客户端渲染耗时。• 预渲染：对静态页面生成HTML快照，缩短首屏渲染时间。

微前端（Micro Frontends）是一种将大型单体前端应用拆分为多个独立模块的架构模式，旨在通过分治策略提升开发效率和可维护性。模块化：将复杂应用拆分为独立的小型子应用，每个子应用可独立开发、测试和部署。技术无关性：允许不同子应用使用不同技术栈（如React、Vue），便于团队灵活选择工具。独立性与隔离性：子应用运行时状态隔离，避免全局变量或样式污染。渐进式重构：支持逐步替换旧系统模块，降低技术升级风险。

如果我们按照cz来规范了提交风格，但是依然有同事通过 git commit 按照不规范的格式提交应该怎么办呢？Commitizen 是一个帮助我们编写规范 commit message 的工具；我们可以通过commitlint来限制提交；这个时候我们提交代码需要使用 npx cz。然后根据引导依次填写提交内容。

Webpack 使用了 JSONP 技术，特别是在实现代码分割和动态加载模块时。JSONP 通过<script>标签加载模块，并在加载完成后执行回调函数，完成模块的加载和注册。

开发环境中，Webpack是先打包再启动开发服务器，而Vite则是直接启动，然后再按需编译依赖文件。

因为避免了压缩直接进行上传，在打包时会提高一定的效率，但是 static 中的资源文件由于没有进行压缩等操作，所以文件的体积也就相对于 assets 中打包后的文件提交较大点。在服务器中就会占据更大的空间。而项目中引入的第三方的资源文件如iconfoont.css 等文件可以放置在 static 中，因为这些引入的第三方文件已经经过处理，不再需要处理，直接上传。assets 中存放的静态资源文件在项目打包时，也就是运行 npm run build 时会将 assets 中放置的静态资源文件进行打包上传。

在 Webpack 中，Hash 码主要用来缓存控制，确保每次修改文件后生成的文件名是唯一的，从而避免缓存问题。hashchunkhash和。1）hash：Webpack 会针对整个项目构建生成一个唯一的 Hash 码，只要项目中有任何一个文件变化，生成的 Hash 码都会改变。2）chunkhash：Webpack 为每个 chunk 生成一个 Hash 码，只有当该 chunk 内容发生变化时，对应的 Hash 码才会改变。这在分离文件的情况下更为有效，减小了很多无关文件的缓存更改。3）

在 Webpack 中实现持久化缓存有几个关键策略，最核心的就是利用文件内容哈希，使得文件名发生变化，这样浏览器就会识别为新的资源而不是使用缓存的旧资源。：使用工具如 Lighthouse 来分析和评估缓存性能，从具体的报告中找出改进点。：针对不同的浏览器特性生成不同的构建版本 (现代浏览器和旧版浏览器)，利用。是基于文件内容生成的哈希，任何内容改变都会导致哈希变化。4）分离供应商代码（第三方库）和应用代码，利用。则是基于整个 chunk 的内容进行哈希计算。2）使用合适的插件来优化缓存，例如。

当我们在使用import语句导入模块时，Webpack 会处理中的依赖。具体来说，Webpack 会从目录中查找模块，并根据配置，比如和，确定模块路径，然后将模块打包到最终的构建文件中。Webpack 通过resolve配置来决定如何查找中的模块，也会使用类似loaders来处理不同类型的文件。

Webpack 的生命周期是指从启动到结束整个过程中会经历的一系列步骤。简单来说，Webpack 的生命周期分为以下几个主要阶段：1）初始化：Webpack 读取配置文件，初始化参数。2）编译：根据入口文件，递归地构建依赖图。3）模块解析与转换：模块被解析、编译和转换成标准模块。4）优化：在生成块和模块之后，对依赖关系进行优化。5）生成：根据最终的依赖关系，生成最终的输出文件。

确保 Webpack 只监听需要的文件和目录，可以通过配置的ignore来忽略一些变化频率高且不需要监听的文件，如。添加resolve中的alias和extensions，减少 Webpack 在解析模块时的搜索范围，可以显著加快打包速度。使用如或等工具，搭配或vue-loader等插件，可以实现更高效的热更新。可以利用 Webpack 的cache功能，避免每次重新构建都需要从头开始，极大提高构建速度。在开发环境中尽量少用或不用代码压缩、文件优化等耗时操作，保留这些优化仅在生产环境中执行。

以下笔记来源：黑马程序员。

它可以是一个绝对路径（如 CDN 网址）或相对路径，当 Webpack 生成的文件在 HTML 文件中引用时，会加上这个前缀，来指明文件的具体位置。Webpack 会在处理这些资源时，自动加上指定的公共路径前缀，使得资源引用更加简便和一致。这样一来，动态导入的文件就会从指定的 CDN 地址加载。，在引用文件时就会使用相对路径，可能导致一些路径错误。在上面的配置中，所有动态加载或者打包好的资源都会以。在使用 Webpack Dev Server 时，可以用于设定热更新的路径，使得资源能够正确的加载。

【代码】【Webpack】使用 Webpack 和 LocalStorage 实现静态资源的离线缓存。

对于大型、多页面的应用项目，尤其是需要很多自定义配置的情况，Webpack 是不二选择。如果你的项目是一个库或者重视打包效率和代码体积的开发，Rollup 会是不错的选择。对于中小型项目，或者你希望快速地启动和开发，不愿意花时间配置，Parcel 会是很好的选择。任务运行器（Grunt/Gulp）：主要用来执行常规的构建任务，如压缩、编译、测试等。模块打包器（Webpack/Rollup）：不仅能执行常规任务，还能解析模块依赖关系，将模块组织起来，输出版更适合现代 Web 应用的打包文件。

传统的方式都是使用 Terser 这种 JS 开发的压缩器来实现，在 Webpack 或者 Rollup 中作为一个 Plugin 来完成代码打包后的压缩混淆的工作。但 Terser 其实很慢，主要有 2 个原因。

SWC 由 Rust 编写， 既可用于编译，也可用于打包。对于编译，它使用现代 JavaScript 功能获取 JavaScript / TypeScript 文件并输出所有主流浏览器支持的有效代码。SWC在单线程上比 Babel 快 20 倍，在四核上快 70 倍。简单来说swc实现了和babel一样的功能，但是它比babel快。优势在于其高性能和低内存消耗，这源于 Rust 语言的性能优势。swc官网swc.rs/

它的主要作用是为了确保在不同浏览器和环境中运行 JavaScript 代码时保持一致的行为，尤其是提供对较新 ECMAScript 特性（如 Promise、Symbol、Object.assign 等）的支持。随着 JavaScript 标准不断更新，新的特性和功能被添加，但并不是所有的浏览器都能及时支持这些新特性。core-js 是模块化的，这意味着开发者可以按需引入自己需要的 polyfill，而不是全部引入，这不仅能减少代码体积，还有助于提高性能。stage-x：指处于某一阶段的js语言提案。

静态分析是一种在无需运行代码的情况下，基于代码的语法和结构，分析代码的行为及性能的方法。Webpack 的 Tree Shaking 机制的原理是通过静态分析代码的模块依赖图，把没有用到的代码“剪掉”，从而减少打包后的代码体积。1）标记(Marking)：Webpack 会从入口文件出发，递归地分析代码中的模块依赖，标记出用到的模块和导出的函数或变量。2）摇树(Shaking)：基于上一步的标记结果，Webpack 会移除未被使用的模块和代码（即那些没有被标记的部分）。

会在根目录下生成个一个 .husky 目录，在这个目录下面会有一个 pre-commit 文件，这个文件里面的命令在我们执行 commit 的时候就会执行。我们已经集成好了我们代码校验工具 eslint，prettier，stylelint，但是需要每次手动的去执行命令才会格式化我们的代码。当我们对代码进行 commit 操作的时候，就会执行命令，对代码进行格式化，然后再提交。所以，要只看暂存区的代码（自己的代码），需要暂存区 eslint 校验。默认进行的是全量检查，存在耗时问题，历史遗留问题。

一个代码规范检查的插件。不同公司有不同的规范，所以并没有一个所谓的标准。自己学习一般去查看所用框架的官方文档，一般都会推荐适合于框架本身的一套规范。

Vite 提供了一套原生 ESM 的HMR API。具有 HMR 功能的框架可以利用该 API 提供即时、准确的更新，而无需重新加载页面或清除应用程序状态。当通过 create-vite创建应用程序时，所选模板已经预先配置了相关的集成。ImportMeta和。ImportMeta是在模块上下文中使用的，则是 Vite 的 HMR 相关的接口，包含了一些允许你在模块更新时执行特定操作的方法。ImportMeta。

启⽤ Tree Shaking：使⽤ES6的import和export语句以及Webpack的tree shaking功能可以排除未使用的代码，减少打包后的⽂件⼤⼩，从⽽提⾼构建速度和性能。使⽤LoaderOptionsPlugin插件：该插件可以将Loader的选项提取到Webpack的配置中，避免在每个Loader中重复设置相同的选项，从⽽提⾼构建速度。使⽤多个entry和output：使⽤多个entry和output可以将不同的代码分别打包成多个⽂件，从⽽减少每个⽂件的⼤⼩，提⾼构建速度和性能。

HMR全称Hot Module Replacement，可以理解为模块热替换，指在应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个应用。不使用热更新，我们在应用运行过程中修改了某个模块，通过自动刷新会导致整个应用的整体刷新，那页面中的状态信息都会；如果使用的是HMR，就可以实现只将修改的模块实时替换至应用中，只会重新编译修改的代码，将新的模块发送到客户端，替换掉旧的模块，不必完全刷新整个应用。实现 HMR 的关键是在客户端和服务器端之间建⽴⼀个 WebSocket 连接，当代码发⽣变化。

Rollup 是一款使用 ES Modules 标准的 JavaScript 打包工具。它也可以将项目中散落的细小模块打包为整块代码。从作用上来看，Rollup 与 Webpack 非常类似。不过相比于 Webpack，Rollup 要小巧的多。因为 Webpack 在配合一些插件的使用下，几乎可以完成开发过程中，前端工程化的绝大多数工作。而 Rollup 可以说仅仅是一个 ESM 打包器，没有其它。${log(msg);

Vite也是前端的构建工具。vite开发时，并不对代码打包，而是直接采用ESM的方式来运行项目在项目部署时，在对项目进行打包除了速度外，vite使用起来也更加方便默认项目源码目录就是根目录，而不像 webpack 那样是 src 目录。

shim.d.ts 文件是一个类型声明文件，用于告诉 TypeScript 编译器如何处理 Vue 的单文件组件（SFC）和其他自定义模块。为 Vue 的单文件组件和其他非 TypeScript 模块提供类型信息，以便在 TypeScript 项目中使用它们时能够正确地进行类型检查和代码提示。webpack5 以上的版本需要安装 webpack-cli。webpack-dev-server 开启一个本地服务。

但 scope hoisting 的启用是有前提的，如果遇到某些模块多次被其他模块引用，或者使用了动态导入的模块，或者是非 ESM 的模块，都不会有 scope hoisting。在未开启 scope hoisting 时，webpack 会将每个模块的代码放置在一个独立的函数环境中，这样是为了保证模块的作用域互不干扰。scope hoisting 是 webpack 的内置优化，它是针对模块的优化，在生产环境打包时会自动开启。这样做的好处是减少了函数调用，对运行效率有一定提升，同时也降低了打包体积。

这是你的项目的入口点（即主要的 JavaScript 文件）。Rollup 会从这个文件开始分析你的代码，并尝试找出它依赖的其他模块。，本身就可以当做脚手架使用。webpack只是提供了打包，vue-cli脚手架内也只是提供了一套模板，内部集成webpack，供开发使用。Rollup 是一个 JavaScript 模块打包器，它可以将多个模块打包成一个单独的文件。本身已经集成了大部分的配置，比如各种预处理语言，ts，各种资源。不会生成过多的运行代码。可以多模块化规范打包。

混淆代码（Code Obfuscation）是一种将代码变得难以阅读和理解的过程，目的是保护代码不被轻易复制或理解，防止他人窃取或修改你的代码逻辑。splitChunks.chunks 选项设为 ‘all’，表示希望将所有类型的代码（包括同步和异步代码）都进行分割。控制流改变：改变代码的控制流结构，例如使用复杂的条件和逻辑，使得代码难以跟踪和理解。删除元数据：移除代码中的注释、未使用的变量和函数，以及其他不必要的元数据。代码压缩：移除所有不必要的空格、换行和注释，减少代码的体积。

打包代码时会将所有 js 文件打包到一个文件中，体积太大了。我们如果只要渲染首页，就应该只加载首页的 js 文件，其他文件不应该加载。所以我们需要将打包生成的文件进行代码分割，生成多个 js 文件，渲染哪个页面就只加载某个 js 文件，这样加载的资源就少，速度就更快。代码分割实现方式有不同的方式，为了更加方便体现它们之间的差异，我们会分别创建新的文件来演示。

开发时我们定义了一些工具函数库，或者引用第三方工具函数库或组件库。如果没有特殊处理的话我们打包时会引入整个库，但是实际上可能我们可能只用上极小部分的功能。这样将整个库都打包进来，体积就太大了。是一个术语，通常用于描述移除 JavaScript 中的没有使用上的代码。ES ModuleWebpack 已经默认开启了这个功能，无需其他配置。

开发时我们修改了其中一个模块代码，Webpack 默认会将所有模块全部重新打包编译，速度很慢。所以我们需要做到修改某个模块代码，就只有这个模块代码需要重新打包编译，其他模块不变，这样打包速度就能很快。HotModuleReplacement（HMR/热模块替换）：在程序运行中，替换、添加或删除模块，而无需重新加载整个页面。此时 css 样式经过 style-loader 处理，已经具备 HMR 功能了。但是 js 还不行。上面这样写会很麻烦，所以实际开发我们会使用其他 loader 来解决。。

所有 css 和 js 合并成了一个文件，并且多了其他代码。此时如果代码运行出错那么提示代码错误位置我们是看不懂的。一旦将来开发代码文件很多，那么很难去发现错误出现在哪里。所以我们需要更加准确的错误提示，来帮助我们更好的开发代码。

Css 文件目前被打包到 js 文件中，当 js 文件加载时，会创建一个 style 标签来生成样式这样对于网站来说，会出现闪屏现象，用户体验不好我们应该是单独的 Css 文件，通过 link 标签加载性能才好如果希望将所有 CSS 提取到一个独立的文件，而不是嵌入到 DOM 中，可以使用 mini-css-extract-plugin 而不是 style-loader。

不同于开发环境，生产模式是开发完成代码后，我们需要得到代码将来部署上线。这个模式下我们主要对代码进行优化，让其运行性能更好。优化代码运行性能优化代码打包速度1）创建两个单独的 Webpack 配置文件：一个用于开发环境（如 webpack.dev.js），另一个用于生产环境（如 webpack.prod.js）。每个配置文件包含特定环境下的依赖和优化。2）Webpack 通常通过 NODE_ENV 环境变量来区分当前的运行环境。开发环境下，设置为 “development”；

每次写完代码都需要手动输入指令才能编译代码，太麻烦了，我们希望一切自动化，即修改代码后服务器浏览器自动刷新。

1）：在 Webpack 构建过程中，生成的所有 JavaScript 和 CSS 文件都可以动态地被插入到 HTML 文件中，这避免了手动在 HTML 文件中更新文件引用的问题。2）：你可以使用自己定义的 HTML 文件作为模板，并通过 ejs 等模板引擎生成最终的 HTML 文件。这使得定制化 HTML 文件变得十分便捷。3）：对于多页应用，html-webpack-plugin 可以配合 Webpack 的多入口配置，每个入口会生成对应的 HTML 文件。4）

Webpack 对 js 处理是有限的，只能编译 js 中 ES 模块化语法，不能编译其他语法，导致 js 不能在 IE 等浏览器运行，所以我们希望做一些兼容性处理。其次开发中，团队对代码格式是有严格要求的，我们不能由肉眼去检测代码格式，需要使用专业的工具来检测。我们先完成 Eslint，检测代码格式无误后，在由 Babel 做代码兼容性处理。