前端工程化面试总结

发布时间：2023年12月18日

什么是 `bundle`, 什么是 `chunk`，什么是`module`？

在前端开发中，特别是在构建和打包过程中，bundle、chunk 和 module 是常用的概念，它们代表着不同的代码组织和打包方式：

1. Module（模块）：

Module（模块）： 在前端开发中，模块是指代码被组织和封装后的单个文件或者代码单元，每个模块可以包含特定的功能或逻辑，并且通常都有自己的作用域。比如，一个 JavaScript 文件、一个 CSS 文件、一个图片等都可以被视为一个模块。

2. Bundle（捆绑）：

Bundle（捆绑）： 在前端开发中，Bundle 指
的是将多个模块（Module）打包合并成一个或多个文件的过程。一个 Bundle 文件包含了多个模块，通常是经过压缩和优化的代码，用于在浏览器中加载和执行。它可以是整个应用程序的代码集合。

3. Chunk（块）：

Chunk（块）： Chunk 通常是指 Webpack 或其他打包工具在打包过程中分割出的代码块，一个 Chunk 包含一个或多个模块，它可以是异步加载的代码片段。通常在使用代码分割（Code Splitting）时会生成多个 Chunk，这些 Chunk 可以在需要时按需加载，从而优化页面加载性能。

总的来说，Module 是单个文件或代码单元，Bundle 是将多个模块打包合并而成的文件，Chunk 是打包工具在拆分代码时生成的块，可以是按需加载的代码片段。在前端开发中，对模块、捆绑和块的合理组织和管理有助于优化应用程序的性能和加载速度。

hash chunkhash contenthash三者区别

在前端构建和打包中，hash、chunkhash 和 contenthash 是用于标识文件内容版本的不同方式：

1. Hash：

Hash（哈希）： hash 是指整个构建过程中所有文件的 hash 值都是相同的。当任何一个文件发生变化时，会导致所有文件的 hash 值都发生变化。因此，如果项目中某个文件发生变化，那么所有打包后的文件名都会发生变化，这可能会导致缓存失效，不利于浏览器的缓存。

2. Chunkhash：

Chunkhash（块哈希）： chunkhash 是 Webpack 提供的一种基于 Chunk 内容的 hash 算法。它会根据不同的 Chunk（代码块）生成对应的哈希值。每个 Chunk 的文件名都会根据其内容的变化而变化，但不同的 Chunk 之间互不影响。这样做可以保证在某个文件内容变化时，只有受影响的 Chunk 对应的文件名会发生变化，不会影响其他文件。

3. Contenthash：

Contenthash（内容哈希）： contenthash 是针对文件内容的 hash 值，它会根据文件内容的变化而变化。在文件内容没有发生改变的情况下，contenthash 的值会保持不变。它通常用于对文件的缓存控制，比如对 CSS 文件、图片等资源进行哈希命名，可以确保只有文件内容发生变化时，其对应的文件名才会发生变化，这有利于浏览器的缓存。

应用场景：

hash：适用于开发环境，用于文件名的唯一标识，但不利于缓存。
chunkhash：适用于生产环境，用于生成不同 Chunk 对应的文件名，保证文件内容变化时只影响对应 Chunk 的文件名。
contenthash：适用于对文件内容的缓存控制，确保只有文件内容变化时，对应文件名才会发生变化，有利于缓存。

综合而言，这些 hash 类型在构建过程中用于文件名的版本标识，有助于控制缓存和优化文件加载。选择合适的 hash 类型可以更好地管理文件版本和缓存。

你知道什么是脚手架吗？

当谈论前端开发时，“脚手架”通常指的是一种工具或者模板，用于快速搭建项目框架、提供项目结构、配置和工程化的基础设施。它可以帮助开发者在开始一个新项目时，快速搭建起基本的开发环境和框架，省去了重复的配置和初始化步骤。

脚手架通常包括以下功能：

1. 项目结构初始化：

生成项目结构： 提供一种标准的项目结构，包括文件夹布局、基本文件（如 HTML、CSS、JavaScript 文件）等，方便开发者快速开始项目。
模板引擎支持： 基于模板引擎，可以根据用户输入的参数自动生成项目基础结构和文件。

2. 自动化构建和打包：

构建工具集成： 集成常用的构建工具（比如Webpack、Parcel等），配置基础的打包、压缩、编译等功能，简化项目构建流程。
自动化任务： 提供自动化任务，比如代码压缩、CSS 预处理器编译、静态资源优化等。

3. 规范约束和代码检查：

ESLint、Prettier等支持： 集成代码规范检查工具，确保团队成员的代码风格统一。
Git Hooks支持： 集成Git Hooks，可以在提交代码前进行代码检查和格式化等操作。

4. 快速启动开发服务器：

本地开发服务器： 集成本地服务器，支持热更新、实时预览等功能，便于开发者快速预览项目效果。

脚手架可以针对特定的技术栈或者框架，比如React、Vue、Angular等，为特定的项目类型提供定制化的脚手架工具。通过使用脚手架，开发者可以更专注于业务逻辑和功能实现，减少了搭建环境和配置的时间，提高了开发效率。

webpack的核心思想是什么

Webpack 的核心思想可以概括为“一切皆模块”，它是一个现代化的前端构建工具，主要解决前端项目中模块化、依赖管理、打包、转换和优化等问题。其核心思想主要包括以下几个方面：

1. 模块化：

Webpack 将项目中的各种文件（包括 JavaScript、CSS、图片等）都视作模块，这些模块可以相互依赖、引用，并通过 loader 进行处理。它支持多种模块化规范（如 CommonJS、AMD、ES Modules 等），能够将不同类型的资源都视作模块进行处理和管理。

2. 打包和构建：

Webpack 提供了强大的打包功能，可以将各个模块打包合并成最终的静态资源文件，通过配置入口文件和输出文件的方式，将项目中的各种模块整合成一个或多个 bundle 文件。它能够将项目中的各种资源按需加载、合并和优化，提高页面加载速度和性能。

3. Loader：

Webpack 通过 Loader 来处理非 JavaScript 文件，比如处理 CSS、图片、字体等资源文件，将它们转换成模块可以直接引用的形式。Loader 允许开发者在构建过程中预处理文件，例如使用 Babel 处理 ES6+ 语法、使用 PostCSS 处理 CSS、压缩图片等。

4. 插件系统：

Webpack 的插件系统是其核心机制之一，它通过各种插件提供了丰富的功能和优化方式，例如压缩代码、代码分割、资源优化、环境变量注入等。开发者可以根据自己的需求，使用现有的插件或者编写自定义插件，来扩展 Webpack 的功能。

5. 构建优化：

Webpack 提供了多种优化手段，包括代码分割、懒加载、Tree Shaking（摇树优化）、缓存等，用于提升构建效率和最终打包文件的性能。

总的来说，Webpack 的核心思想是将项目中的所有资源视作模块进行管理和处理，通过模块化、打包、转换和优化等功能，构建出高性能、可维护的前端项目。

Loader和Plugin的区别

Webpack 中的 Loader 和 Plugin 是两个核心概念，它们在 Webpack 构建过程中扮演不同的角色，有着不同的作用和功能：

Loader：

作用： Loader 用于对模块的源代码进行转换和处理，Webpack 只能理解 JavaScript 和 JSON 文件，而对于其他类型的文件（如 CSS、图片、字体等），需要使用 Loader 来进行处理转换成模块。
工作原理： Loader 将不同类型的文件转换成模块，每个 Loader 只负责单一转换任务，多个 Loader 可以串联使用，按照指定的顺序依次处理文件。例如，处理 CSS 文件的 Loader 可以将 CSS 转换为 JavaScript 模块。
配置方式： 在 Webpack 配置中，通过 module.rules 或 rules 字段配置 Loader，指定要使用的 Loader 和相应的处理规则。每个 Loader 都需要单独安装并在配置中进行配置。

Plugin：

作用： Plugin 用于扩展 Webpack 的功能，提供各种自定义的任务和功能，比如打包优化、资源管理、注入环境变量等。Plugin 可以监听 Webpack 构建过程中的事件，并在特定时机执行自定义操作。
工作原理： Plugin 是通过 Webpack 提供的钩子机制工作的，在不同的生命周期阶段触发对应的钩子函数，执行自定义的任务。Plugin 可以在整个构建流程中介入，从而实现各种功能的扩展。
配置方式： 在 Webpack 配置中，通过 plugins 字段配置 Plugin。通常，需要在配置文件中实例化并配置所需的 Plugin，然后将其添加到配置文件中的 plugins 数组中。

区别总结：

Loader：用于对不同类型的模块进行转换和处理，负责将非 JavaScript 和 JSON 类型的文件转换成 Webpack 能够处理的模块。
Plugin：用于扩展和定制 Webpack 的功能，可以在构建过程中的不同阶段执行自定义任务，以实现各种功能的增强和扩展。

Loader 和 Plugin 在 Webpack 中起着不同但互补的作用，共同构建出一个功能强大、可定制性高的前端构建工具。

常用Loader

在 Webpack 中，有许多常用的 Loader 用于处理不同类型的文件，以下是一些常见的 Loader：

JavaScript 相关：

Babel-loader： 用于将 ES6+ 的 JavaScript 代码转换为向后兼容的版本，使得现代 JavaScript 代码可以在老版本浏览器中运行。

样式相关：

Style-loader 和 CSS-loader： 一起使用，用于处理 CSS 文件，将 CSS 转换成 JavaScript 模块，并将样式插入到 HTML 页面中。
Sass-loader 和 Less-loader： 用于处理 Sass 和 Less 样式文件，将其转换为 CSS 文件。

图片、字体等资源：

File-loader 和 Url-loader： 用于处理图片、字体等资源文件，将其转换为文件路径，可以根据配置选择是否转换为 base64 格式。

其他常用 Loader：

Html-loader： 用于处理 HTML 文件中的图片资源，将图片路径转换为模块引用，使得可以被其他 Loader 处理。
Json-loader： 用于处理 JSON 文件。

多用途 Loader：

Webpack-loader： 用于直接执行 Webpack 配置中的 loader 字段，可以在配置文件中实现对特定文件的处理逻辑。

这些 Loader 可以根据项目需要选择使用，并且可以组合使用，串联起不同的处理逻辑。通过 Loader 的组合和配置，可以实现对不同类型资源文件的处理和转换，从而构建出符合项目需求的前端工程。

常用Plugin

DllPlugin:作用和optimization.splitChunk的作用相似，都是用某种方法拆分bundles,可以大幅度提升构建速度
SplitChunksPlugin：分离公共的第三方模块以及业务代码
extract-text-webpackplugin: extract-text-webpackplugin(webpack4)里的contenthash值，保证引入css文件所在的模块只要css文件内容不变，就不会重复构建css
MiniCssExtractPlugin：抽离css文件，删除和压缩css代码，本插件是extract-text-webpackplugin插件的webpack5的升级用法，可以实现contenthash

HtmlWebpackPlugin：

1、为html文件动态引入外部资源给script、link添加compile(编译)后的hash，防止引用缓文件问题
2、可以生成创建html入口文件，比如单页面可以生成一个html文件入口，多页面生成多个html

UglifyjsWebpackPlugin：删除和压缩js文件
EslintWebpackPlugin:作用类似eslint-loader(eslint-loader已被弃用)，审查代码是否符合编码规范和统一，审查代码是否存在语法错误

说一下 Webpack 的热更新原理吧

Webpack 的热更新（Hot Module Replacement，HMR）是一种在开发过程中实现实时更新的技术，它允许在不刷新整个页面的情况下，将更新的模块实时地替换到运行中的应用程序中。这提供了一种更快速、更流畅的开发体验。

热更新的原理主要涉及以下几个步骤：

1. 监听文件变化：

Webpack Dev Server 监听文件系统中文件的变化。当任何文件被修改时，Webpack 接收到变化的模块。

2. 构建更新：

Webpack 编译器会重新编译发生变化的模块，并生成一个新的代码块（chunk）。

3. 传输更新：

Webpack Dev Server 将新编译的模块传输到浏览器端。

4. 应用更新：

HMR runtime（运行时）会在浏览器端接收到更新，并尝试在运行中的应用程序中替换更新的模块，而无需完全重新加载页面。

5. 更新应用状态：

替换成功后，如果新模块与旧模块具有相同的接口，HMR runtime 将尝试更新应用程序的状态，以确保应用程序在不重新加载的情况下保持当前状态。

实现原理：

在实现上，Webpack 使用了 HMR runtime、HMR 插件和 HMR 接口。HMR runtime 是运行在浏览器中的 JavaScript 代码，用于处理模块的热更新。当文件变化时，Webpack 使用 HMR 插件生成更新的模块代码，并通过 HMR 接口将更新的模块代码传输给运行在浏览器中的 HMR runtime。

HMR runtime 接收到新模块后，尝试替换运行中的模块，如果模块之间存在依赖关系，它会尝试更新整个依赖树，以确保应用程序状态的一致性。

总的来说，Webpack 的热更新技术通过实时监测文件变化、重新编译模块、传输更新的模块到浏览器端以及在运行中替换更新模块来实现代码的即时更新，提升了开发效率和体验。

如何优化 Webpack 的构建速度

优化 Webpack 构建速度可以通过多种方式来实现，包括优化配置、使用合适的插件、减少构建模块数量等。以下是一些优化构建速度的常见方法：

1. 使用合适的 Loader 和 Plugin：

Loader： 确保使用最轻量级的 Loader 来处理文件，避免不必要的转换和处理。
Plugin： 只使用必要的插件，避免过多的插件配置。

2. 缩小文件搜索范围：

resolve 配置： 在 Webpack 配置中使用 resolve 配置项，缩小模块搜索范围。
exclude/include 配置： 在 Loader 配置中使用 exclude 和 include 来缩小 Loader 处理的文件范围。

3. 使用DllPlugin提前打包：

使用 DllPlugin 预先打包第三方库，减少打包时间，加快构建速度。

4. 开启缓存：

使用缓存（cache）：开启 Webpack 的缓存功能，可以减少构建时间。
使用 hard-source-webpack-plugin 等插件，将模块缓存到磁盘，提高二次构建速度。

5. 多线程/并行构建：

使用 HappyPack 或 thread-loader 等插件，实现多线程或并行构建，加快构建速度。

6. 代码分割和懒加载：

使用代码分割（Code Splitting）和懒加载（Lazy Loading），避免一次性加载过多资源。

7. Tree Shaking：

开启 Tree Shaking，删除未使用的代码，减少打包体积和构建时间。

8. 减少模块数量：

尽可能减少不必要的模块依赖，避免构建过多的模块。

9. 升级 Webpack：

使用最新版本的 Webpack，新版本通常会有性能优化和改进。

10. 监控构建时间：

使用 Webpack Bundle Analyzer 等工具，分析构建产物，找出体积较大的模块或库，优化打包策略。

这些优化措施可以根据具体项目需求进行选择和组合，综合利用可以显著提升 Webpack 的构建速度，提高开发效率。

代码分割的本质是什么？有什么意义呢？

代码分割（Code Splitting）的本质是将一个大文件拆分成多个小文件，以实现按需加载。它的主要目的是优化应用程序的性能和加载速度，特别是对于大型单页应用（SPA）而言，可以降低初始加载时间和减少资源请求量。

意义：

加快初始加载速度： 将整个应用拆分为多个文件，按需加载，用户在访问网站时可以先加载页面所需的最小必要代码，快速展示页面内容，提升用户体验。
减少资源请求量： 拆分后的文件可以根据页面或用户行为进行延迟加载，避免一次性请求过多的资源文件，减轻服务器压力和网络传输负担。
提高缓存命中率： 通过分割代码，可以更精确地控制哪些部分需要更新，提高缓存命中率，减少用户每次访问时需要下载的内容量。
优化用户体验： 针对不同页面或功能模块的需求，按需加载相关代码，减少不必要的加载和执行时间，提升页面响应速度。

分割方式：

手动分割： 开发者手动定义代码分割点，使用 Webpack 的动态 import 或特定语法（如 import()）进行分割。
自动分割： 通过 Webpack 的优化策略和插件（如 SplitChunksPlugin）自动分割代码，根据配置和规则将模块拆分成多个 bundle。

实现方式：

按路由分割： 基于路由进行分割，每个路由对应一个 bundle，当进入不同路由时，加载对应的 bundle。
按功能模块分割： 将应用按功能模块划分，对不同的功能模块进行分割，根据用户行为或需要时加载对应模块。

综上所述，代码分割通过将大型文件拆分成多个小文件，并根据需要进行按需加载，从而优化应用性能，提升加载速度，减少请求量，提高用户体验。

babel原理

Babel 是一个广泛用于将新版 JavaScript 代码转换为向后兼容版本的工具。它的原理是将现代 JavaScript 代码（如 ES6+）转换为向前兼容的 ES5 代码，以便于在老版本浏览器或环境中运行。

Babel 的主要工作原理包括以下几个步骤：

词法分析（Lexical Analysis）： Babel 使用词法分析器（Lexer）将输入的代码转换为 token 流，识别并标记不同类型的词法单元，比如关键字、标识符、运算符等。
语法分析（Parsing）： Babel 使用语法分析器（Parser）将 token 流转换为抽象语法树（Abstract Syntax Tree，AST），AST 表示了代码的结构和层次，将代码以对象树的形式进行表示，方便后续的处理。
转换（Transformation）： Babel 对 AST 进行遍历和修改，在此阶段执行插件提供的转换规则，将 ES6+ 的语法特性（如箭头函数、解构赋值、类、模块化等）转换为兼容性更好的 ES5 代码。
生成（Code Generation）： 经过转换后的 AST 被重新转换回代码字符串形式，生成向后兼容的 ES5 代码。

Babel 主要组成部分：

Parser（解析器）： 将源代码解析成 AST。
Traverser（遍历器）： 遍历 AST，可以执行自定义操作或者应用插件进行代码转换。
Transformer（转换器）： 应用插件规则，对 AST 进行修改转换。
Generator（生成器）： 将转换后的 AST 重新转换为代码字符串形式。

插件和预设：

插件（Plugins）： 插件提供了一系列的转换规则，用于转换特定的语法特性或进行特定的优化。例如，@babel/plugin-transform-arrow-functions 用于转换箭头函数。
预设（Presets）： 预设是一组插件的集合，可以方便地应用一系列的转换规则，如 @babel/preset-env 将当前环境中的新特性转换为目标环境所需的代码。

通过词法分析、语法分析、转换和代码生成等步骤，Babel 能够将现代 JavaScript 代码转换为向后兼容的 ES5 代码，从而使得开发者可以在不同环境下运行和使用新的语言特性。

linux部署和windows sever服务器区别？

Linux 和 Windows Server 作为服务器操作系统在很多方面有着不同的特点和用途。

1. 开放源代码 vs. 专有系统：

Linux： 是开源操作系统，有许多不同的发行版（如Ubuntu、CentOS、Debian），允许用户自定义配置和修改内核。因为开放性，更适合在服务器环境中定制和优化。
Windows Server： 是由微软开发的专有操作系统，具有较为封闭的体系结构，提供了特定的功能和工具，更适合特定的应用场景和服务。

2. 用户界面和管理：

Linux： 通常以纯命令行方式管理，虽然也有图形化界面（如 Ubuntu 桌面版），但服务器一般使用无头（Headless）模式，只通过 SSH 远程连接进行管理。
Windows Server： 提供图形用户界面和命令行双重管理方式，可以通过桌面和 PowerShell 进行操作和管理。

3. 安全性：

Linux： 一般被认为在网络和服务器领域有更好的安全性，因为它有更严格的权限管理、更新更及时、开源社区反应迅速。
Windows Server： 在过去因为广泛使用、更容易受到攻击，但在安全性方面也不断加强，有一系列的安全功能和更新。

4. 服务和应用支持：

Linux： 通常用于托管 Web 服务器、数据库服务、云计算和开源软件，有大量的服务器应用支持。
Windows Server： 适合托管 Microsoft 相关的服务和应用程序，比如 IIS 网络服务、Active Directory 等。

5. 资源消耗：

Linux： 相对于 Windows Server，Linux 在硬件资源上通常需要更少的内存和处理器资源，可以更高效地利用硬件。
Windows Server： 对硬件资源的需求相对较高，通常需要更多的内存和处理器资源。

选择适合自己需求的服务器操作系统需要考虑到多种因素，包括所需应用、安全性、管理需求以及开发者的技能水平等。通常情况下，对于 Web 服务器、云计算等领域，Linux 更为普遍和受欢迎。

你们公司项目发布流程是什么样的？

1. 开发阶段：

需求收集和分析： 收集和分析用户需求，并制定相应的功能规划和开发计划。
开发和测试： 开发团队根据需求进行开发，同时进行单元测试、集成测试和验收测试，确保功能的稳定性和质量。

2. 预发布/预生产阶段：

测试环境： 将开发完成的功能部署到测试环境，供测试团队进行全面测试，验证功能和性能。
Bug 修复： 根据测试结果修复发现的 Bug 和问题，确保软件质量。

3. 正式发布阶段：

生产环境准备： 将通过测试的版本部署到生产环境，可能涉及数据库迁移、配置调整等。
发布和监控： 发布新版本到生产环境，确保发布过程平稳，同时设置监控机制监测系统运行情况。

4. 后续维护阶段：

持续优化和维护： 发布后进行持续的优化和维护工作，处理新的需求、Bug 修复和性能优化。

每个公司的项目发布流程都可能有所不同，这取决于公司的规模、行业、项目特点和开发团队的组织方式。这个流程可能会结合敏捷开发、持续集成和持续交付等方法，以确保软件质量和项目顺利交付。

前端资源发布路径怎么实现非覆盖式发布（平滑升级）？

非覆盖式发布（平滑升级）是指在更新前端资源时，不会直接覆盖原有的资源文件，而是在新版本就绪后，通过特定的方式进行切换，确保用户在更新过程中不会出现页面空白或者异常。

实现非覆盖式发布的常见方式：

文件版本管理： 在前端资源文件名中添加版本号或哈希值，每次发布更新时，文件名会发生变化。这样可以避免浏览器缓存旧版本文件，同时允许新旧版本共存。
CDN 路径切换： 通过修改 CDN 路径或者资源引用路径，将原有的资源文件路径指向新版本，而不是直接替换文件。比如在代码中使用动态的资源路径指向新版本文件。
灰度发布： 将新版本资源只对一部分用户进行发布，观察新版本在小范围内的稳定性和性能，然后逐步扩大至全量用户。
使用 Service Worker： 利用 Service Worker 实现资源缓存和动态加载，使得用户在浏览器中加载新版本的同时，可以自动缓存和展示旧版本，确保用户可以无感知地进行平滑升级。
前端路由切换： 在前端路由中实现版本控制，通过路由的切换来加载不同版本的资源。
动态加载模块： 使用模块化加载工具，如 Webpack 的动态 import，按需加载资源模块，实现平滑升级。

实际应用中，可以结合以上方式来实现非覆盖式发布，根据项目的具体需求和技术栈选取合适的方法。这样可以在更新过程中保障用户体验，避免因更新而导致的页面异常或加载问题。

SSR项目是如何发布的

SSR（Server-Side Rendering，服务器端渲染）项目的发布与传统的前端项目有些不同，因为它需要在服务器端渲染页面，并确保在发布过程中的一些特殊需求。

SSR 项目发布的主要步骤包括：

构建服务端代码： 确保服务器端代码是最新的，并进行必要的构建和打包操作。
更新服务器代码： 将构建好的服务端代码部署到服务器环境中，确保服务器端程序与最新版本保持一致。
配置服务器环境： SSR 项目通常需要特定的服务器环境配置，比如 Node.js 环境、代理配置等，确保服务器能够正确地渲染页面并提供数据。
运行服务器端程序： 启动服务器端程序，使其能够响应客户端请求，并进行页面的服务器端渲染。
监控和测试： 发布后，需要进行监控和测试，确保 SSR 页面能够正常运行，渲染正确的内容，而不是出现错误或异常。
缓存处理： SSR 项目中常用的数据缓存或页面缓存策略需要进行相应的处理，确保缓存能够正确刷新或失效。
负载均衡和扩展： 针对大流量情况，需要配置负载均衡、集群扩展等，确保 SSR 项目能够处理高并发请求。
安全性审查： 检查服务器端环境的安全性，确保发布后不会出现安全漏洞或攻击。

注意事项：

代码回滚机制： 发布前需要备份当前版本，确保出现问题时能够快速回滚到之前的可用版本。
发布版本记录： 记录发布的版本号和更新内容，以便追溯和排查问题。
版本兼容性： 发布新版本时，确保新旧版本之间的兼容性，避免因为更新导致用户出现异常或错误。

SSR 项目的发布需要考虑到服务器端渲染的特殊性，确保服务器能够正确渲染页面并提供数据，以及在发布过程中保障用户体验。

你有发布过自己的npm包吗？流程是怎样的？

发布 npm 包的一般步骤如下：

1. 创建 npm 账号：

如果没有 npm 账号，需要在 npm 官网上注册一个账号。

2. 初始化项目：

在本地创建项目，并确保项目根目录下有 package.json 文件，可以通过 npm init 命令来生成或手动创建。

3. 编写代码和功能：

开发并测试你的 npm 包，确保它能够按预期工作。

4. 添加 npm 包信息：

在 package.json 文件中填写必要的信息，包括包名称、版本、描述、作者、许可证等。

5. 注册 npm 包名：

使用 npm adduser 命令登录你的 npm 账号。
使用 npm publish 命令将你的包发布到 npm 上。如果是首次发布，可能需要确认邮箱。

6. 版本控制：

每次更新发布前，修改 package.json 文件中的版本号，通常可以使用 npm version 命令来自动更新版本号。

7. 发布更新：

每次修改后的更新，使用 npm publish 发布新版本。确保新版本的代码可用并且没有破坏性修改。

8. 维护和更新：

持续维护和更新你的包，回应用户的反馈和问题，并根据需求发布新版本。

注意事项：

确保你的代码遵循 npm 包的最佳实践和规范。
选择合适的版本号管理方案，遵循 Semantic Versioning 规范。
注意包的依赖管理，确保依赖项的版本兼容性和稳定性。
如果涉及到需要保密的信息，如 API 密钥等，确保这些信息不会暴露在你的 npm 包中。

发布 npm 包需要谨慎对待，确保包的质量和稳定性，并且及时响应用户反馈，持续维护和更新包的版本。

你会搭建私有的npm仓库吗？怎么搭建？

当涉及搭建私有的 npm 仓库时，你可以选择使用一些工具或服务来搭建和管理私有的 npm registry。下面是几种常见的方法：

1. Verdaccio：

Verdaccio 是一个轻量级的、可托管的 npm registry，可以在本地搭建私有的 npm 仓库。

安装： 通过 npm 安装 Verdaccio 并启动服务。
配置： 配置文件中定义用户权限、包访问等规则。
使用： 将 Verdaccio 作为本地的 npm registry，上传、下载和管理私有的 npm 包。

2. Sinopia（现在叫做 Verdaccio）：

Verdaccio 的前身是 Sinopia，也是一个可自行搭建的私有 npm registry。

安装： 安装 Sinopia 并启动服务。
配置： 配置用户权限、包访问等规则。
使用： 将 Sinopia 作为本地的 npm registry，管理私有 npm 包。

3. Nexus Repository Manager：

Nexus Repository Manager 是一个功能强大的仓库管理器，支持 Maven、npm、Docker 等多种包管理器。

安装： 下载并安装 Nexus Repository Manager。
配置： 创建 npm 仓库并进行相应配置。
使用： 使用 Nexus 作为私有 npm registry，上传、下载和管理私有 npm 包。

4. 自建 npm Enterprise：

如果需要更高级的功能和定制化需求，也可以自行搭建 npm 企业版，这需要更多的自定义和配置，以满足特定的企业需求。

这些工具都提供了方便的管理界面和配置选项，让你可以快速搭建私有的 npm 仓库，用于存储和管理企业或团队内部的私有 npm 包。选择最适合你团队需求的工具，并根据文档进行安装和配置。

Webpack 为什么慢，如何进行优化

Webpack 在处理大型项目时可能会出现构建速度慢的情况，主要原因包括：

大量文件： 大量的文件会增加构建时间，特别是当模块数量庞大时，Webpack 需要处理的文件也会增多。
复杂的 Loader/Plugin 配置： 使用复杂的 Loader 或者大量耗时的插件，会增加构建的时间。
未优化的构建配置： 没有经过优化的 Webpack 配置可能导致构建效率低

，以下是一些优化 Webpack 构建速度的方法：

1. 减少构建文件数量：

优化代码结构： 合并文件、减少不必要的代码和依赖项，减少模块数量。
使用代码分割： 使用动态 import、SplitChunksPlugin 等工具进行代码分割，按需加载模块，减少初次加载的体积。

2. 优化 Loader 和 Plugin：

简化 Loader 链： 确保使用最小必要的 Loader，并且确保 Loader 的顺序合理，避免不必要的处理。
精简 Plugin 使用： 移除不必要的插件，选择性地只使用必要的插件，避免过多的工作。

3. 合理配置 Webpack：

使用缓存和多线程构建： 启用缓存，如使用 babel-loader 的缓存选项、使用 cache-loader，以及使用 HappyPack 进行多线程构建。
优化 Resolve 配置： 减少不必要的文件搜索路径，确保 resolve.modules、resolve.extensions 等配置项只包含必要的内容。

4. 优化生产环境配置：

使用生产环境模式： 在生产环境下使用 mode: 'production'，Webpack 会自动开启一些优化，比如代码压缩等。
优化压缩和分离代码： 使用 UglifyJSPlugin、TerserPlugin 等进行代码压缩，使用 MiniCssExtractPlugin 分离 CSS。

5. Webpack 优化工具和插件：

Bundle 分析工具： 使用 Bundle Analyzer 来分析和优化构建产物，找出体积较大的模块和文件。
Webpack 性能插件： 使用 webpack-bundle-analyzer、speed-measure-webpack-plugin 等插件监控和评估构建性能，找出性能瓶颈。

通过以上优化措施，可以有效提升 Webpack 构建速度，但需要根据具体项目情况灵活选择合适的优化方案。

webpack 中 loader 和 plugins 的区别

在 Webpack 中，Loader 和 Plugin 是两个不同的概念，它们在构建过程中扮演着不同的角色。

Loader：

作用： Loader 用于对模块的源代码进行转换和处理。它是一个导出为函数的 JavaScript 模块，接受源文件作为参数，并返回转换后的结果。
特点： 每个 Loader 通常负责一种特定类型的文件处理，比如将 ES6+ 代码转换为 ES5、处理样式文件、转换图片为 Base64 等。
用法： 在 Webpack 配置中通过 module.rules 定义，指定不同文件类型的处理规则和使用的 Loader。

Plugin：

作用： Plugin 可以用于执行更广泛的任务和处理，包括打包优化、资源管理、注入环境变量等。它通过在构建流程中钩子（hooks）进行干预，从而扩展了 Webpack 的功能。
特点： 每个 Plugin 都是一个类的实例，拥有特定的方法和功能，可以访问整个编译过程的各个环节。
用法： 在 Webpack 配置中通过 plugins 属性添加插件，通过实例化对应的插件类并传入参数来使用。

区别总结：

功能范围不同： Loader 主要负责对模块的转换和处理，Plugin 则可以执行更广泛的任务和操作，对整个构建流程进行干预。
使用方式不同： Loader 通过规则配置的方式被应用到不同类型的文件上，而 Plugin 需要实例化并添加到 Webpack 配置的 plugins 属性中。
作用环节不同： Loader 在模块转换阶段执行，而 Plugin 可以在 Webpack 构建过程中的各个阶段执行特定操作。

综上所述，Loader 和 Plugin 在 Webpack 中扮演着不同的角色，Loader 负责文件转换，而 Plugin 则用于执行更广泛的任务和操作，丰富了 Webpack 的功能和扩展性。

什么是长缓存，在webpack中如何做到长缓存优化？

长缓存是指让浏览器尽可能长时间地缓存静态资源，减少用户重复加载已缓存资源的次数，提升网站性能和用户体验。在 Webpack 中，实现长缓存通常涉及以下几个方面：

1. 文件名哈希化：

使用文件内容的哈希值作为文件名： 在生产环境中，通过配置 Webpack，在输出文件名中添加哈希值。这样如果文件内容发生变化，哈希值会改变，浏览器会认为是一个新的文件，强制重新下载，确保缓存的文件是最新的。

2. Output 配置：

设置 output.filename 和 output.chunkFilename： 在 Webpack 配置中，通过 output.filename 和 output.chunkFilename 配置项，使用 [contenthash] 或 [hash] 作为文件名的一部分，确保每次文件内容变化时，文件名也会变化。

3. 提取公共模块：

使用 SplitChunksPlugin： 使用 Webpack 内置的 SplitChunksPlugin 插件，将公共模块（例如第三方库）提取为单独的 chunk，避免每次代码变化导致这些公共模块的缓存失效。

4. 设置缓存控制：

设置缓存控制头： 在服务器配置中，为静态资源设置适当的缓存控制头，如设置 Cache-Control 和 Expires 头，控制浏览器缓存静态资源的时间。

示例 Webpack 配置：

const path = require('path');

module.exports = {
  // ...其他配置
  output: {
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].[contenthash].js',
    // 输出路径等配置
  },
  optimization: {
    moduleIds: 'hashed', // 使用模块的相对路径生成 moduleId，确保模块ID不变
    runtimeChunk: 'single', // 将 runtime 代码提取为单独的 chunk
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
};

这些优化措施可以帮助确保在文件内容未变化时，浏览器可以尽可能长时间地缓存静态资源，减少不必要的网络请求，提升网站的加载速度和性能。

什么是组件？什么是模块化？有什么区别？

“组件” 和 “模块化” 是两个在软件开发中常用的概念，它们有着不同的含义和应用场景。

组件：

定义： 组件是软件开发中可重用的、独立的、可组合的部件或元素，通常具有特定的功能或界面。它们可以是用户界面的一部分，也可以是执行特定任务的代码块。
特点： 组件具有独立性、封装性和可组合性，可以是页面上的按钮、表单元素、UI 元素或更复杂的功能模块，它们有自己的生命周期、状态和行为。

模块化：

定义： 模块化是一种软件设计和组织代码的方法，将程序分解成独立、可重用、可维护的小模块。每个模块负责执行特定的任务或实现特定的功能。
特点： 模块化使得代码更易于管理、维护和扩展，减少了代码之间的耦合性，提高了代码的可重用性和可测试性。常见的模块化规范有 CommonJS、AMD、ES6 模块等。

区别：

概念层面： 组件是软件开发中构建用户界面或功能的一部分，是可视化或逻辑上的元素；而模块化更侧重于代码的组织和管理，将功能划分成独立的模块。
应用场景： 组件通常用于构建用户界面，如页面上的各个元素；而模块化则适用于整个应用程序，涉及代码的组织和结构。

尽管组件和模块化在软件开发中都是重要的概念，但它们的应用场景和功能定位有所不同。组件更注重于界面元素和功能模块的构建，而模块化更侧重于代码组织和管理。在实际开发中，通常会同时应用组件化和模块化的思想来构建复杂的应用程序。

你们公司有自己的脚手架工具么，他是怎么工作的？

有自己的脚手架工具

待解决问题 polyfills:提供api以方便兼容不同的浏览器 vendor：项目插件扩展 CommonsChunkPlugin 每次构建时都会重新构建一次 vendor？原因就是因为CommonsChunkPlugin把polyfills和vendor进行了打包，polyfills和vendor中包含了mian所有需要的公共模块，所以mian不再进行打包这些公共模块，只打包我们自己写的模块。

文章来源:https://blog.csdn.net/wsq_yyds/article/details/135008017
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！

前端工程化面试总结

什么是 bundle, 什么是 chunk，什么是module？

1. Module（模块）：

2. Bundle（捆绑）：

3. Chunk（块）：

hash chunkhash contenthash三者区别

1. Hash：

2. Chunkhash：

3. Contenthash：

应用场景：

你知道什么是脚手架吗？

1. 项目结构初始化：

2. 自动化构建和打包：

3. 规范约束和代码检查：

4. 快速启动开发服务器：

webpack的核心思想是什么

1. 模块化：

2. 打包和构建：

3. Loader：

4. 插件系统：

5. 构建优化：

Loader和Plugin的区别

Loader：

Plugin：

区别总结：

常用Loader

JavaScript 相关：

样式相关：

图片、字体等资源：

其他常用 Loader：

多用途 Loader：

常用Plugin

说一下 Webpack 的热更新原理吧

1. 监听文件变化：

2. 构建更新：

3. 传输更新：

4. 应用更新：

5. 更新应用状态：

实现原理：

如何优化 Webpack 的构建速度

1. 使用合适的 Loader 和 Plugin：

2. 缩小文件搜索范围：

3. 使用DllPlugin提前打包：

4. 开启缓存：

5. 多线程/并行构建：

6. 代码分割和懒加载：

7. Tree Shaking：

8. 减少模块数量：

9. 升级 Webpack：

10. 监控构建时间：

代码分割的本质是什么？有什么意义呢？

意义：

分割方式：

实现方式：

babel原理

Babel 的主要工作原理包括以下几个步骤：

Babel 主要组成部分：

插件和预设：

linux部署和windows sever服务器区别？

1. 开放源代码 vs. 专有系统：

2. 用户界面和管理：

3. 安全性：

4. 服务和应用支持：

5. 资源消耗：

你们公司项目发布流程是什么样的？

1. 开发阶段：

2. 预发布/预生产阶段：

3. 正式发布阶段：

4. 后续维护阶段：

前端资源发布路径怎么实现非覆盖式发布（平滑升级）？

实现非覆盖式发布的常见方式：

SSR项目是如何发布的

SSR 项目发布的主要步骤包括：

注意事项：

你有发布过自己的npm包吗？流程是怎样的？

发布 npm 包的一般步骤如下：

1. 创建 npm 账号：

2. 初始化项目：

3. 编写代码和功能：

4. 添加 npm 包信息：

什么是 `bundle`, 什么是 `chunk`，什么是`module`？