wordpress建站站长之家,装潢设计软件有哪些,番茄网络营销策划方案,敦煌做网站的公司电话如果对前端八股文感兴趣#xff0c;可以留意公重号#xff1a;码农补给站#xff0c;总有你要的干货。 前端工程化
Webpack 概念 本质上#xff0c;webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时#xff0c;它会在内部从一个… 如果对前端八股文感兴趣可以留意公重号码农补给站总有你要的干货。 前端工程化
Webpack 概念 本质上webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)然后将你项目中所需的每一个模块组合成一个或多个 bundles它们均为静态资源用于展示你的内容。 有哪些常见的Loader你用过哪些Loader css-loader加载 CSS支持模块化、压缩、文件导入等特性style-loader把 CSS 代码注入到 JavaScript 中通过 DOM 操作去加载 CSSpostcss-loader扩展 CSS 语法使用下一代 CSS可以配合 autoprefixer 插件自动补齐 CSS3 前缀eslint-loader通过 ESLint 检查 JavaScript 代码tslint-loader通过 TSLint检查 TypeScript 代码vue-loader加载 Vue.js 单文件组件ts-loader: 将 TypeScript 转换成 JavaScriptbabel-loader把 ES6 转换成 ES5... 有哪些常见的Plugin你用过哪些Plugin html-webpack-plugin简化 HTML 文件创建 (依赖于 html-loader)define-plugin定义环境变量 (Webpack4 之后指定 mode 会自动配置)uglifyjs-webpack-plugin不支持 ES6 压缩 (Webpack4 以前)webpack-parallel-uglify-plugin: 多进程执行代码压缩提升构建速度mini-css-extract-plugin: 分离样式文件CSS 提取为独立文件支持按需加载 (替代extract-text-webpack-plugin)speed-measure-webpack-plugin: 可以看到每个 Loader 和 Plugin 执行耗时 (整个打包耗时、每个 Plugin 和 Loader 耗时)webpack-bundle-analyzer: 可视化 Webpack 输出文件的体积 (业务组件、依赖第三方模块)happy-pack plugin... Webpack构建流程简单说一下 初始化参数从配置文件和 Shell 语句中读取与合并参数得出最终的参数 开始编译用上一步得到的参数初始化 Compiler 对象加载所有配置的插件执行对象的 run 方法开始执行编译 确定入口根据配置中的 entry 找出所有的入口文件 编译模块从入口文件出发调用所有配置的 Loader 对模块进行翻译再找出该模块依赖的模块再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理 完成模块编译在经过第4步使用 Loader 翻译完所有模块后得到了每个模块被翻译后的最终内容以及它们之间的依赖关系 输出资源根据入口和模块之间的依赖关系组装成一个个包含多个模块的 Chunk再把每个 Chunk 转换成一个单独的文件加入到输出列表这步是可以修改输出内容的最后机会 输出完成在确定好输出内容后根据配置确定输出的路径和文件名把文件内容写入到文件系统 总结版 始化启动构建读取与合并配置参数加载 Plugin实例化 Compiler编译从 Entry 出发针对每个 Module 串行调用对应的 Loader 去翻译文件的内容再找到该 Module 依赖的 Module递归地进行编译处理输出将编译后的 Module 组合成 Chunk将 Chunk 转换成文件输出到文件系统中 loader 与 plugin Loader 本质就是一个函数在该函数中对接收到的内容进行转换返回转换后的结果。因为 Webpack 只认识 JavaScript所以 Loader 就成了翻译官对其他类型的资源进行转译的预处理工作。 Loader 在 module.rules 中配置作为模块的解析规则类型为数组。每一项都是一个 Object内部包含了 test(类型文件)、loader、options (参数)等属性。 Plugin 就是插件基于事件流框架 Tapable插件可以扩展 Webpack 的功能在 Webpack 运行的生命周期中会广播出许多事件Plugin 可以监听这些事件在合适的时机通过 Webpack 提供的 API 改变输出结果。 Plugin 在 plugins 中单独配置类型为数组每一项是一个 Plugin 的实例参数都通过构造函数传入。 热更新原理 Webpack 的热更新又称热替换Hot Module Replacement缩写为 HMR。 这个机制可以做到不用刷新浏览器而将新变更的模块替换掉旧的模块。HMR的核心就是客户端从服务端拉去更新后的文件准确的说是 chunk diff (chunk 需要更新的部分)【实际上 WDS 与浏览器之间维护了一个 Websocket当本地资源发生变化时WDS 会向浏览器推送更新并带上构建时的 hash让客户端与上一次资源进行对比。客户端对比出差异后会向 WDS 发起 Ajax 请求来获取更改内容(文件列表、hash)这样客户端就可以再借助这些信息继续向 WDS 发起 jsonp 请求获取该chunk的增量更新。】后续的部分(拿到增量更新之后如何处理哪些状态该保留哪些又需要更新)由 HotModulePlugin 来完成提供了相关 API 以供开发者针对自身场景进行处理像react-hot-loader 和 vue-loader 都是借助这些 API 实现 HMR。 Source Map 使用以及原理 source map 是将编译、打包、压缩后的代码映射回源代码的过程。打包压缩后的代码不具备良好的可读性想要调试源码就需要 soucre map。 线上环境一般有三种处理方案 hidden-source-map借助第三方错误监控平台 Sentry 使用nosources-source-map只会显示具体行数以及查看源代码的错误栈。安全性比 sourcemap 高sourcemap通过 nginx 设置将 .map 文件只对白名单开放(公司内网)注意避免在生产中使用 inline- 和 eval-因为它们会增加 bundle 体积大小并降低整体性能。 模块打包原理知道吗 Webpack 实际上为每个模块创造了一个可以导出和导入的环境本质上并没有修改 代码的执行逻辑代码执行顺序与模块加载顺序也完全一致。 文件指纹是什么怎么用 文件指纹是打包后输出的文件名的后缀。 Hash和整个项目的构建相关只要项目文件有修改整个项目构建的 hash 值就会更改 Chunkhash和 Webpack 打包的 chunk 有关不同的 entry 会生出不同的 chunkhash Contenthash根据文件内容来定义 hash文件内容不变则 contenthash 不变 实例 设置 output 的 filename用 chunkhash。设置 MiniCssExtractPlugin 的 filename使用 contenthash。设置file-loader的name使用hash。 如何保证各个loader按照预想方式工作 可以使用 enforce 强制执行 loader 的作用顺序pre 代表在所有正常 loader 之前执行post 是所有 loader 之后执行。(inline 官方不推荐使用) 是否写过Loader简单描述一下编写loader的思路 Loader 支持链式调用所以开发上需要严格遵循“单一职责”每个 Loader 只负责自己需要负责的事情。 Loader 运行在 Node.js 中我们可以调用任意 Node.js 自带的 API 或者安装第三方模块进行调用 Webpack 传给 Loader 的原内容都是 UTF-8 格式编码的字符串当某些场景下 Loader 处理二进制文件时需要通过 exports.raw true 告诉 Webpack 该 Loader 是否需要二进制数据 尽可能的异步化 Loader如果计算量很小同步也可以 Loader 是无状态的我们不应该在 Loader 中保留状态 使用 loader-utils 和 schema-utils 为我们提供的实用工具 加载本地 Loader 方法 Npm linkResolveLoader 简单描述一下编写Plugin的思路 webpack在运行的生命周期中会广播出许多事件Plugin 可以监听这些事件在特定的阶段钩入想要添加的自定义功能。Webpack 的 Tapable 事件流机制保证了插件的有序性使得整个系统扩展性良好。 compiler 暴露了和 Webpack 整个生命周期相关的钩子 compilation 暴露了与模块和依赖有关的粒度更小的事件钩子 插件需要在其原型上绑定apply方法才能访问 compiler 实例 传给每个插件的 compiler 和 compilation对象都是同一个引用若在一个插件中修改了它们身上的属性会影响后面的插件 找出合适的事件点去完成想要的功能 emit 事件发生时可以读取到最终输出的资源、代码块、模块及其依赖并进行修改(emit 事件是修改 Webpack 输出资源的最后时机)watch-run 当依赖的文件发生变化时会触发 异步的事件需要在插件处理完任务时调用回调函数通知 Webpack 进入下一个流程不然会卡住
ESLint 概念 ESLint是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具使用它可以避免低级错误和统一代码的风格。如果每次在代码提交之前都进行一次eslint代码检查就不会因为某个字段未定义为undefined或null这样的错误而导致服务崩溃可以有效的控制项目代码的质量。 原理 ESLint 使用 Espree 解析 JavaScript。ESLint 使用 AST 去分析代码中的模式。ESLint 是完全插件化的。每一个规则都是一个插件并且你可以在运行时添加更多的规则。
Babel 概念 Babel 是一个工具链主要用于将采用 ECMAScript 2015 语法编写的代码转换为向后兼容的 JavaScript 语法以便能够运行在当前和旧版本的浏览器或其他环境中。 原理 大多数JavaScript Parser遵循 estree 规范Babel 最初基于 acorn 项目(轻量级现代 JavaScript 解析器) Babel大概分为三大部分 解析将代码转换成 AST词法分析将代码(字符串)分割为token流即语法单元成的数组语法分析分析token流(上面生成的数组)并生成 AST 转换访问 AST 的节点进行变换操作生产新的 AST Taro就是利用 babel 完成的小程序语法转换 生成以新的 AST 为基础生成代码
TypeScript
概念原理
单元测试 Jest
有没有使用过
包管理器 npm run start 的整个过程 运行 npm run xxx的时候npm 会先在当前目录的 node_modules/.bin 查找要执行的程序如果找到则运行没有找到则从全局的 node_modules/.bin 中查找npm i -g xxx就是安装到到全局目录如果全局目录还是没找到那么就从 path 环境变量中查找有没有其他同名的可执行程序。 npm/yarn/pnpm pnpm 通过巧妙硬链接 软链接结合的方式完全实现了依赖树结构的 node_modules并且严格遵循了 Node.js 的模块解析标准解决了幻影依赖和 npm 分身的问题。并且通过全局只保存一份在 ~/.pnpm-store 的方式在不同的项目中进行 install 的速度也会变得更快也解决了磁盘空间占用的问题 npm install 的执行过程 npm 模块安装机制 发出npm install命令查询 node_modules 目录之中是否已经存在指定模块若存在不再重新安装若不存在npm 向 registry 查询模块压缩包的网址下载压缩包存放在根目录下的.npm目录里解压压缩包到当前项目的 node_modules 目录 npm 实现原理
Git rebase 和 merge 的区别 merge 通过merge合并分支会新增一个merge commit然后将两个分支的历史联系起来其实是一种非破坏性的操作对现有分支不会以任何方式被更改但是会导致历史记录相对复杂 rebase rebase会将整个分支移动到另一个分支上有效地整合了所有分支上的提交主要的好处是历史记录更加清晰是在原有提交的基础上将差异内容反映进去消除了 git merge所需的不必要的合并提交
CSS 工程化 Sass、Less 是什么为什么要使用他们 它们都是 CSS 预处理器是 CSS 上的一种抽象层。它们是一种特殊的语法/语言最终编译成 CSS。例如 Less 是一种动态样式语言将 CSS 赋予了动态语言的特性如变量继承运算 函数。为什么要使用它们结构清晰便于扩展。 可以方便地屏蔽浏览器私有语法差异。封装对浏览器语法差异的重复处理 减少无意义的机械劳动。可以轻松实现多重继承。 完全兼容 CSS 代码可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展所以老的 CSS 代码也可以与 LESS 代码一同编译。 CSS预处理器/后处理器是什么为什么要使用它们 预处理器 如lesssassstylus用来预编译sass或者less增加了css代码的复用性。层级mixin 变量循环 函数等对编写以及开发UI组件都极为方便。 后处理器 如 postCss通常是在完成的样式表中根据css规范处理css让其更加有效。目前最常做的是给css属性添加浏览器私有前缀实现跨浏览器兼容性的问题。 css预处理器为css增加一些编程特性无需考虑浏览器的兼容问题可以在CSS中使用变量简单的逻辑程序函数等在编程语言中的一些基本的性能可以让css更加的简洁增加适应性以及可读性可维护性等。 使用原因 结构清晰 便于扩展可以很方便的屏蔽浏览器私有语法的差异可以轻松实现多重继承完美的兼容了CSS代码可以应用到老项目中 对 CSS 工程化的理解 解决的问题 宏观设计CSS 代码如何组织、如何拆分、模块结构怎样设计编码优化怎样写出更好的 CSS构建如何处理我的 CSS才能让它的打包结果最优可维护性代码写完了如何最小化它后续的变更成本如何确保任何一个同事都能轻松接手 三个方向 预处理器Less、 Sass 等重要的工程化插件 PostCssWebpack loader 等 。
