临沂网站建设哪家好,重庆建设招标造价信息网站,网站放音乐代码,女生适合做策划吗目录 webpack理解#xff1f;
webpack构建流程#xff1f;
loader解决什么问题#xff1f;
plugin解决什么问题#xff1f;
编写loader和plugin的思路#xff1f;
webpack热更新#xff1f;
如何提高webpack的构建速度#xff1f;
问git常用命令#xff1f;
ht…目录 webpack理解
webpack构建流程
loader解决什么问题
plugin解决什么问题
编写loader和plugin的思路
webpack热更新
如何提高webpack的构建速度
问git常用命令
httphttp和https区别
http常见状态码
get和post区别
地址栏输入url敲下回车后发生了什么
浏览器渲染机制
代码规范 webpack理解
Webpack 是一个现代的静态模块打包工具。它是一个基于配置的构建工具用于将多个模块包括 JavaScript、样式表、图像等打包成一个或多个 bundle并提供了一种优化资源加载和管理的方式。
主要概念和工作原理
入口EntryWebpack 通过指定一个入口文件来开始构建过程。入口可以是单个文件或多个文件Webpack 将从入口文件开始分析依赖关系树。
输出OutputWebpack 会将打包后的资源输出到指定目录。输出通常是一个或多个 bundles其中包含被 chunk 包裹的模块。
模块ModuleWebpack 将项目中的所有文件视为模块。每个模块都有自己的类型JavaScript、CSS、图片等Webpack 根据不同的类型使用对应的 loader 进行处理。
LoaderLoader 是用于对不同类型的模块进行处理和转换的插件。例如Babel Loader 可以将 ES6/ES7 代码转换为浏览器可识别的 ES5 代码。
插件Plugin插件是用于扩展 Webpack 功能的组件。可以用插件来处理更复杂的任务如生成 HTML 文件、压缩代码等。
开发服务器DevServerWebpack 提供了一个开发服务器用于在开发过程中实时更新修改后的代码并提供热模块替换功能。
模式ModeWebpack 提供了三种模式分别是开发模式、生产模式和 none 模式。每种模式都有对应的配置用于优化构建结果。
通过配置文件通常是 webpack.config.js开发人员可以定义入口、输出、loader、插件等来自定义项目的打包流程。Webpack 会根据配置文件的设置进行相应的处理和优化最终生成可部署到生产环境的静态资源。
Webpack 的强大之处在于其模块化能力、灵活性和可扩展性。它可以处理多样化的资源类型并支持各种优化策略使得前端项目的构建变得高效和可控。 webpack构建流程
Webpack 的构建流程可以概括为以下几个步骤
解析配置文件Webpack 会根据项目根目录下的配置文件默认为 webpack.config.js来获取构建相关的配置选项。
解析入口文件Webpack 根据配置文件中指定的入口文件路径开始解析入口文件及其依赖关系。
加载模块Webpack 使用不同的 loader 来处理不同类型的模块。在解析过程中Webpack 会递归地加载和解析模块的依赖关系并将它们加入到构建过程中。
插件执行Webpack 在构建过程中提供了许多插件扩展的机会。插件可以用于执行各种任务如优化、压缩、代码分割等。Webpack 会按顺序执行这些插件并根据需要对模块和资源进行转换和处理。
输出文件在构建完成后Webpack 将生成的文件输出到指定的目录。输出的文件通常是一个或多个 bundle包含了被 chunk 包裹的模块。
优化策略Webpack 提供了一系列的优化策略以提高构建结果的性能和体积。例如代码压缩、Tree Shaking消除未使用代码、代码分割以及缓存等。
开发服务器在开发过程中Webpack 提供了一个开发服务器DevServer用于实时更新修改后的代码并提供热模块替换功能。它能够在内存中构建和提供资源加快开发效率。
整个流程中Webpack 会根据配置文件的设置来确定入口文件、输出路径、加载器和插件等。在每个步骤中Webpack 会使用各个加载器处理不同类型的模块再通过插件对资源进行转换和优化。最终Webpack 将生成的静态资源输出到指定目录可用于部署到生产环境。
需要注意的是该构建流程可以根据具体的配置和需求进行调整和扩展以满足项目的需求。 loader解决什么问题
用于解决模块的转换和加载问题。它们可以将不同类型的资源如 JavaScript、CSS、图片等转换为可在浏览器中直接使用的形式。 plugin解决什么问题
用于解决一些特定的问题或实现额外的功能。它们可以在构建过程中介入并对资源进行处理、优化和管理。 编写loader和plugin的思路
编写 Loader 的思路
1.了解要处理的文件类型和需要实现的功能。
2.创建一个 JavaScript 模块该模块会导出一个函数作为 Loader 函数。
3.在 Loader 函数中接收源文件内容作为参数并对其进行处理和转换。
4.根据需求可以使用现有的工具库或自己编写代码来完成转换逻辑。
5.最后通过返回转换后的结果将其传递给 Webpack 构建流程。
编写 Plugin 的思路
1.确定插件的目的和功能。
2.创建一个 JavaScript 类该类定义了插件的行为和配置选项。
3.在类中实现 Webpack 插件接口通常是 apply 方法并在该方法中执行插件的逻辑。
4.在插件逻辑中可以监听特定的构建事件如文件生成、模块解析、编译完成等并在这些事件发生时执行相应的操作。
5.根据需要可以向构建过程中注入额外的资源、修改输出文件、优化代码等。
6.最后将插件的实例添加到 Webpack 配置的 plugins 属性中使其生效。 webpack热更新
Webpack 热更新Hot Module ReplacementHMR是 Webpack 提供的一项功能用于在开发过程中实时更新修改后的代码而无需完全刷新页面。
热更新的工作原理如下
在启动开发服务器DevServer时Webpack 会将 HMR 相关的代码注入到构建结果中。
当文件发生改变时Webpack 可以通过 WebSocket 和开发服务器进行通信通知浏览器重新加载被修改的模块。
浏览器接收到更新通知后使用新的模块替换旧的模块只对有变化的部分进行替换而不刷新整个页面。
要使用热更新在 Webpack 配置中需要进行以下配置
开启热更新功能在配置中设置 hot: true。
使用 webpack-dev-server 插件来启动开发服务器并设置 hot: true。
对于样式表可以使用 style-loader 来自动应用样式的更新无需手动刷新。
对于 JavaScript 模块需要在入口文件中添加适当的代码以便让 Webpack 监听模块的更新并触发热更新。
实际上大多数的现代前端框架如 React、Vue 等已经集成了热更新功能并且提供了相关的开发工具和插件来简化配置和使用。
热更新可以大幅提高开发效率因为它使得在修改代码后无需手动刷新页面即可查看到变化。然而需要注意的是热更新仅适用于开发环境不应部署到生产环境中。在生产环境中应该生成优化过的静态资源供用户访问。 如何提高webpack的构建速度
1使用更快的构建工具升级 Node.js 版本和 Webpack 版本以获得对构建性能的改进。
2合理配置 entry 和 output根据项目需求合理配置入口文件和输出目录避免不必要的资源扫描和输出。
3使用缓存使用 Webpack 的缓存机制如 cache-loader 插件以及 Babel 的缓存配置以便在重新构建时复用之前的结果减少重复工作。
4只处理必要的文件通过配置 include 和 exclude 选项来限制 loader 和 plugin 的处理范围只处理必要的文件。
5模块热替换HMR在开发环境中启用 HMR可以使修改后的模块实时生效而无需完全重新构建。
6使用 HappyPack 或 thread-loader将构建任务并发执行利用多核 CPU 加速构建过程。
7减小文件体积通过代码拆分、Tree Shaking、压缩等方式减小文件体积减少网络传输时间。
8懒加载对于大型应用或页面使用懒加载技术如动态导入延迟加载非必要的资源。
9优化 loader 和 plugin选择高效的 loader 和 plugin避免使用过度复杂或低效的工具。
10使用 DLL动态链接库将不经常变化的第三方库打包成 DLL以减少构建时间。
11开启并行压缩对于需要压缩的文件使用 parallel-uglify-plugin 等插件进行并行压缩。
12分析构建性能使用 Webpack 的性能分析工具如 webpack-bundle-analyzer来识别构建中的瓶颈并优化相应的配置和代码。 问git常用命令
首先我会跟面试官说我用sourcetree
唉罢了不能太狂还是说点常用命令表示尊重
git init: 在当前目录初始化一个新的 Git 仓库。
git clone repository: 克隆下载远程仓库到本地。
git add file: 将文件添加到暂存区。
git commit -m message: 提交暂存区中的文件并添加提交信息。
git status: 查看工作树和暂存区的状态。
git log: 查看提交历史记录。
git diff file: 查看文件的修改内容。
git branch: 列出所有分支。
git checkout branch: 切换到指定的分支。
git merge branch: 合并指定分支到当前分支。
git pull: 拉取远程仓库的最新变更。
git push: 推送本地提交到远程仓库。
git remote add name url: 添加远程仓库的别名和 URL。
git remote -v: 查看远程仓库的别名和 URL。
git stash: 暂存当前的修改以便切换到其它分支。
git reset HEAD file: 取消对文件的暂存操作。
git revert commit: 撤销指定的提交。
git rm file: 删除文件并将删除操作添加到暂存区。 httphttp和https区别
HTTP超文本传输协议 是一种常用的协议适用于对安全性要求不高的场景传输过程中是明文传输对数据不进行加密处理而 HTTPS 则提供了更加安全的通信方式适用于需要保护用户数据隐私和防止篡改的应用场景。 http常见状态码
200 OK请求成功。服务器成功处理了请求并返回相应的内容。
301 Moved Permanently永久重定向。请求的资源已经被分配了新的 URL以后应使用新的 URL。
302 Found临时重定向。请求的资源暂时移动到了其他 URL客户端应继续使用原始 URL。
400 Bad Request无效请求。服务器无法理解或无法处理该请求。
401 Unauthorized未授权。需要身份验证才能获得访问权限。
403 Forbidden禁止访问。服务器拒绝访问所请求的资源。
404 Not Found未找到。服务器无法找到请求的资源。
500 Internal Server Error服务器内部错误。服务器在处理请求期间发生了意外情况。
502 Bad Gateway错误的网关。作为代理或网关的服务器从上游服务器接收到无效响应。
503 Service Unavailable服务不可用。服务器暂时无法处理请求可能是由于过载或维护。 get和post区别
请求参数位置GET 请求将参数附加在 URL 的查询字符串中例如 example.com/path?param1value1¶m2value2而 POST 请求将参数放在请求体中。
请求参数长度限制GET 请求对参数长度有限制不同浏览器和服务器可能有不同限制通常在 2000-8000 字节之间。POST 请求没有这个限制。
安全性GET 请求参数暴露在 URL 中容易被窃取和篡改因此不适合传输敏感信息。POST 请求将参数放在请求体中相对安全一些。
缓存机制GET 请求默认可以被缓存可以通过设置响应头来控制缓存行为POST 请求默认不会被缓存。
幂等性GET 请求是幂等的即多次重复请求得到的结果应该是相同的不会对服务器产生副作用。POST 请求在多次重复请求时可能会对服务器产生副作用如插入重复数据。
使用场景GET 请求适用于获取资源、查询操作对于无需修改服务器状态的操作POST 请求适用于提交表单数据、新增资源、修改服务器状态等需要发送大量数据或进行写操作的场景。
总结起来GET 请求适合获取数据对服务器无副作用POST 请求适合发送数据、进行修改操作。 地址栏输入url敲下回车后发生了什么
1、URL 解析浏览器解析输入的 URL并分解为协议、域名、端口号和路径等组成部分。
2、DNS 解析浏览器向本地 DNS 服务器发送域名查询请求以获取对应的 IP 地址。如果本地 DNS 缓存中没有该域名的记录则会进行迭代查询直到找到对应的 IP 地址。
3、建立 TCP 传输控制协议连接浏览器使用 HTTP 或 HTTPS 协议通过操作系统底层的网络 API如 sockets来建立与服务器的 TCP 连接。这个过程涉及三次握手即客户端向服务器发送 SYN 包服务器回复 SYNACK 包最后客户端发送 ACK 包确认连接建立。
4、发送 HTTP 请求建立好 TCP 连接后浏览器向服务器发送 HTTP 请求。请求中包含请求方法GET、POST 等、路径、请求头如 User-Agent、Cookie 等和可选的请求体。
5、服务器处理请求服务器接收到请求后根据请求路径和其他信息进行相应的处理。可以是返回静态文件、执行动态代码、查询数据库等操作。
6、服务器发送响应服务器将处理结果打包成 HTTP 响应包括响应状态码、响应头如 Content-Type、Content-Length 等和响应体如 HTML 内容、JSON 数据等通过建立的 TCP 连接发送给浏览器。
7、浏览器渲染页面浏览器接收到响应后根据响应中的内容类型进行相应处理。如果是 HTML 页面浏览器会解析 HTML、CSS 和 JavaScript并将其渲染显示在窗口中。
8、断开 TCP 连接当服务器完成响应并关闭连接时或者浏览器接收到指定的数据长度后会断开与服务器的 TCP 连接。
这些步骤描述了从用户输入 URL 到浏览器显示网页的主要过程。在实际情况中可能还有其他的网络优化技术和缓存机制来提高性能和减少延迟。 浏览器渲染机制
解析HTML构建DOM树解析CSS构建CSSOM树把DOM和CSSOM组合成 渲染树render tree布局和绘制 渲染树。 代码规范
自查 一常规检查 代码是否能正常运行 代码能否实现需求功能 编辑器是否有报错或波浪号警示 控制台有没有明显报错 定时器是否及时清除 是否已经删除了所有的console和debugger 组件卸载掉时候不要忘记清除定时器
二安全检查 引入的包是否存在风险 代码注释中是否包含敏感词汇 eslint是否有报错未修复 接口是否进行了异常捕获并且抛出 文档检查是否有符合规范的注释。
是否有做异常处理尤其是在接口请求失败的时候
命名规范 普通文件以小写字母命名 react模块组件文件命名遵循大驼峰 类命名遵循大驼峰 命名要有意义 标识符不要用前置或后置下划线 函数名用小驼峰文件名需要和函数名一致 类/单例/函数库/对象 用大驼峰。
组件名和导出名应一致
render 不要太臃肿, 一眼可以看完,可以通过拆分组件简化
组件名称和定义该组件的文件名称建议要保持一致
循环列表不要忘了key,不推荐使用index作为key值
按需导入 Taro中编码必须使用单引号
ReactNative图片须压缩 ScrollView禁止嵌套 require 中的图片名字必须是一个静态字符串 避免在 render 函数里创建新数组/对象
总是在自动关闭的标签前加一个空格正常情况下也不需要换行. 多行的JSX标签写在 ()里.
避免使用var
避免使用!important
尽可能不使用any
避免useEffect 依赖过多 老天保佑 求求了别问我这些本宝宝记不住哇
