-
下面的模块导出了什么结果?
jsexports.a = 'a'; module.exports.b = 'b'; this.c = 'c'; module.exports = { d: 'd' }
参考答案:
js{ d: 'd' }
-
说一下你对前端工程化,模块化,组件化的理解?
参考答案:
这三者中,模块化是基础,没有模块化,就没有组件化和工程化
模块化的出现,解决了困扰前端的两大难题:全局污染问题和依赖混乱问题,从而让精细的拆分前端工程成为了可能。
工程化的出现,解决了前端开发环境和生产环境要求不一致的矛盾。在开发环境中,我们希望代码使用尽可能的细分,代码格式尽可能的统一和规范,而在生产环境中,我们希望代码尽可能的被压缩、混淆,尽可能的优化体积。工程化的出现,就是为了解决这一矛盾,它可以让我们舒服的在开发环境中书写代码,然后经过打包,生成最合适的生产环境代码,这样就解放了开发者的精力,让开发者把更多的注意力集中在开发环境上即可。
组件化开发是一些前端框架带来的概念,它把一个网页,或者一个站点,甚至一个完整的产品线,划分为多个小的组件,组件是一个可以复用的单元,它包含了一个某个区域的完整功能。这样一来,前端便具备了开发复杂应用的能力。
-
webpack 和 gulp 的区别是什么?
直播讲解
参考答案:webpack 是基于模块化的构建工具,gulp 是基于工作流的构建工具。
webpack 是一个打包器,它以一个入口为起点,构建出整个项目的依赖关系图,然后进行打包合并,生成打包结果。
gulp 是一个过程管理器,每一步做什么完全看开发人员如何配置,把每一个步骤连接起来形成一个完整的构建流水线。
这两者并不矛盾,完全可以在一个工程中同时使用 webpack 和 gulp,将 webpack 作为 gulp 流水线中的一环。
-
webpack 中的 loader 属性和 plugins 属性的区别是什么?
参考答案:
它们都是 webpack 功能的扩展点。
loader 是加载器,主要用于代码转换,比如 JS 代码降级,CSS 预编译、模块化等
plugins 是插件,webpack 打包流程中每个环节都提供了钩子函数,可以利用这些钩子函数参与到打包生命周期中,更改或增加 webpack 的某些功能,比如生成页面和 css 文件、压缩打包结果等
-
webpack 的核心概念都有哪些?
参考答案:
-
loader
加载器,主要用于代码转换,比如 JS 代码降级,CSS 预编译、模块化等
-
plugin
插件,webpack 打包流程中每个环节都提供了钩子函数,可以利用这些钩子函数参与到打包生命周期中,更改或增加 webpack 的某些功能,比如生成页面和 css 文件、压缩打包结果等
-
module
模块。webpack 将所有依赖均视为模块,无论是 js、css、html、图片,统统都是模块
-
entry
入口。打包过程中的概念,webpack 以一个或多个文件作为入口点,分析整个依赖关系。
-
chunk
打包过程中的概念,一个 chunk 是一个相对独立的打包过程,以一个或多个文件为入口,分析整个依赖关系,最终完成打包合并
-
bundle
webpack 打包结果
-
tree shaking
树摇优化。在打包结果中,去掉没有用到的代码。
-
HMR
热更新。是指在运行期间,遇到代码更改后,无须重启整个项目,只更新变动的那一部分代码。
-
dev server
开发服务器。在开发环境中搭建的临时服务器,用于承载对打包结果的访问
-
-
commonjs 和 es6 模块的区别是什么?
参考答案:
- CMJ 是社区标准,ESM 是官方标准
- CMJ 是使用 API 实现的模块化,ESM 是使用新语法实现的模块化
- CMJ 仅在 node 环境中支持,ESM 各种环境均支持
- CMJ 是动态的依赖,ESM 既支持动态,也支持静态
- ESM 导入时有符号绑定,CMJ 只是普通函数调用和赋值
-
ES6 中如何实现模块化的异步加载?
参考答案:
使用动态导入即可,导入后,得到的是一个 Promise,完成后,得到一个模块对象,其中包含了所有的导出结果。
-
说一下 webpack 中的几种 hash 的实现原理是什么?
参考答案:
-
hash
hash 是跟整个项目的构建相关,只要项目里有文件更改,整个项目构建的 hash 值都会更改,并且全部文件都共用相同的 hash 值
-
chunkhash
每个打包过程单独的 hash 值,如果一个项目有多个 entry,则每个 entry 维护自己的 chunkhash。
-
contenthash
每个文件内容单独的 hash 值,它和打包结果文件内容有关,只要文件内容不变,contenthash 不变。
-
-
webpack 如果使用了 hash 命名,那是每次都会重新生成 hash 吗?
参考答案:
不会。它跟关联的内容是否有变化有关系,如果没有变化,hash 就不会变。具体来说,contenthash 和具体的打包文件内容有关,chunkhash 和某一 entry 为起点的打包过程中涉及的内容有关,hash 和整个工程所有模块内容有关。
-
webpack 中是如何处理图片的? (抖音直播)
参考答案:
webpack 本身不处理图片,它会把图片内容仍然当做 JS 代码来解析,结果就是报错,打包失败。如果要处理图片,需要通过 loader 来处理。其中,url-loader 会把图片转换为 base64 编码,然后得到一个 dataurl,file-loader 则会将图片生成到打包目录中,然后得到一个资源路径。但无论是哪一种 loader,它们的核心功能,都是把图片内容转换成 JS 代码,因为只有转换成 JS 代码,webpack 才能识别。
-
webpack 打包出来的 html 为什么 style 放在头部 script 放在底部?
说明:这道题的表述是有问题的,webpack 本身并不打包 html,相反,它如果遇到 html 代码会直接打包失败,因为 webpack 本身只能识别 JS。之所以能够打包出 html 文件,是因为插件或 loader 的作用,其中,比较常见的插件是 html-webpack-plugin。所以这道题的正确表述应该是:「html-webpack-plugin 打包出来的 html 为什么 style 放在头部 script 放在底部?」
参考答案:浏览器在解析 HTML 时是从上到下进行解析的,当遇到样式和 JS 时,都会停止 HTML 解析,转而解析样式和执行 JS。而我们往往希望,页面的样式解析完成后再解析 HTML,这样可以避免页面闪烁,基于此,样式应该放到顶部;而相反的,我们希望在解析完 HTML 后再执行 JS,这样可以让用户尽快的看到页面,同时也让 JS 执行时能够拿到完整的 DOM 树,基于此,JS 代码应该放到底部。
不过,在 HTML5 中出现了 async 和 defer 属性,使用该属性可以更好的解决 JS 的问题,我们可以把 script 放到顶部,让浏览器尽快下载,但延迟执行。实际上,在新版本的 html-webpack-plugin 中,它已经这样做了。
-
webpack 配置如何实现开发环境不使用 cdn、生产环境使用 cdn?
要配置 CDN,有两个步骤:
- 在 html 模板中直接加入 cdn 引用
- 在 webpack 配置中,加入
externals
配置,告诉 webpack 不要打包其中的模块,转而使用全局变量
若要在开发环境中不使用 CDN,只需根据环境变量判断不同的环境,进行不同的打包处理即可。
- 在 html 模板中使用 ejs 模板语法进行判断,只有在生产环境中引入 CDN
- 在 webpack 配置中,可以根据
process.env
中的环境变量进行判断是否使用externals
配置 - 在
package.json
脚本中设置不同的环境变量完成打包或开发启动。
-
介绍一下 webpack4 中的 tree-shaking 的工作流程?
推荐阅读:https://tsejx.github.io/webpack-guidebook/principle-analysis/operational-principle/tree-shaking
参考答案:tree-shaking 仅支持 ESM 的静态导入语法,对于 CMJ 或者 ESM 中的动态导入不支持 tree shaking。
具体流程主要分为两步:标记和删除
-
标记
webpack 在分析依赖时,会使用注释的方式对导入和导出进行标记,对于模块中没有被其他模块用到的导出标记为 unused harmony export
-
删除
之后在 Uglifyjs (或者其他类似的工具) 步骤进行代码精简,把标记为无用的代码删除。
-
-
说一下 webpack loader 的作用是什么?
参考答案:
用于转换代码。有时是因为 webpack 无法识别某些内容,比如图片、css 等,需要由 loader 将其转换为 JS 代码。有时是因为某些代码需要被特殊处理,比如 JS 兼容性的处理,需要由 loader 将其进一步转换。不管是什么情况,loader 的作用只有一个,就是转换代码。
-
在开发过程中如果需要对已有模块进行扩展,如何进行开发保证调用方不受影响?
参考答案:
实际上就是一个版本管理的问题。
如果此次模块升级只是修复了某一些 bug,作为补丁版本升级即可,不影响主版本和次版本号
如果此次模块升级会新增一些内容,完全兼容之前的 API,作为次版本升级即可
如果此次模块升级会修改之前的 API,则作为主版本升级
在开发项目时,让项目依赖模块的主版本,因此,当模块更新时,只要不是主版本更新,项目都可以非常方便的升级模块版本,无须改动任何代码。但若涉及主版本更新,项目可以完全无视此次版本更新,仍然使用之前的旧版本,无须改动任何代码;当然也可以升级主版本,但就会涉及代码的改动,这就好比跟将 vue2 升级到 vue3 会涉及大量改动一样。
而在开发模块时,在一开始就要精心设计 API,尽量保证 API 的接口稳定,不要经常变动主版本号。如果实在要更新主版本,就需要在一段时间内同时维护两个版本(新的主版本,旧的主版本),给予其他项目一定的升级时间。
-
export 和 export default 的区别是什么?
参考答案:
export 为普通导出,又叫做具名导出,顾名思义,它导出的数据必须带有命名,比如变量定义、函数定义这种带有命名的语句。在导出的模块对象中,命名即为模块对象的属性名。在一个模块中可以有多个具名导出
export default 为默认导出,在模块对象中名称固定为 default,因此无须命名,通常导出一个表达式或字面量。在一个模块中只能有一个默认导出。
-
webpack 打包原理是什么?
参考答案:
- 初始化参数:从配置文件和 Shell 语句中读取与合并参数,得出最终的参数
- 开始编译 :用上一步得到的参数初始化 Compiler 对象,加载所有配置的插件,执行对象的
run
方法开始执行编译 - 确定入口 :根据配置中的
entry
找出所有的入口文件 - 编译模块 :从入口文件出发,调用所有配置的
loader
对模块进行翻译,再把翻译后的内容转换成 AST,通过对 AST 的分析找出该模块依赖的模块,再递归
本步骤直到所有入口依赖的文件都经过了本步骤的处理 - 完成模块编译 :在经过第 4 步使用
loader
翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系图
- 输出资源 :根据入口和模块之间的依赖关系,组装成一个个包含多个模块的
Chunk
,再把每个 Chunk 转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会 - 输出完成:在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统
-
webpack 热更新原理是什么?
参考答案:
当开启热更新后,页面中会植入一段 websocket 脚本,同时,开发服务器也会和客户端建立 websocket 通信,当源码发生变动时,webpack 会进行以下处理:
- webpack 重新打包
- webpack-dev-server 检测到模块的变化,于是通过 webscoket 告知客户端变化已经发生
- 客户端收到消息后,通过 ajax 发送请求到开发服务器,以过去打包的 hash 值请求服务器的一个 json 文件
- 服务器告诉客户端哪些模块发生了变动,同时告诉客户端这次打包产生的新 hash 值
- 客户端再次用过去的 hash 值,以 JSONP 的方式请求变动的模块
- 服务器响应一个函数调用,用于更新模块的代码
- 此时,模块代码已经完成更新。客户端按照之前的监听配置,执行相应模块变动后的回调函数。
-
如何优化 webpack 的打包速度?
参考答案:
-
noParse
很多第三方库本身就是已经打包好的代码,对于这种代码无须再进行解析,可以使用 noParse 配置排除掉这些第三方库
-
externals
对于一些知名的第三方库可以使用 CDN,这部分库可以通过 externals 配置不进行打包
-
限制 loader 的范围
在使用 loader 的时候,可以通过 exclude 排除掉一些不必要的编译,比如 babel-loader 对于那些已经完成打包的第三方库没有必要再降级一次,可以排除掉
-
开启 loader 缓存
可以利用
cache-loader
缓存 loader 的编译结果,避免在源码没有变动时反复编译 -
开启多线程编译
可以利用
thread-loader
开启多线程编译,提升编译效率 -
动态链接库
对于某些需要打包的第三方库,可以使用 dll 的方式单独对其打包,然后 DLLPlugin 将其整合到当前项目中,这样就避免了在开发中频繁去打包这些库
-
-
webpack 如何实现动态导入?
参考答案:
当遇到代码中包含动态导入语句时,webpack 会将导入的模块及其依赖分配到单独的一个 chunk 中进行打包,形成单独的打包结果。而动态导入的语句会被编译成一个普通的函数调用,该函数在执行时,会使用 JSONP 的方式动态的把分离出去的包加载到模块集合中。
-
说一下 webpack 有哪几种文件指纹
参考答案:
-
hash
hash 是跟整个项目的构建相关,只要项目里有文件更改,整个项目构建的 hash 值都会更改,并且全部文件都共用相同的 hash 值
-
chunkhash
每个打包过程单独的 hash 值,如果一个项目有多个 entry,则每个 entry 维护自己的 chunkhash。
-
contenthash
每个文件内容单独的 hash 值,它和打包结果文件内容有关,只要文件内容不变,contenthash 不变。
-
-
常用的 webpack Loader 都有哪些?
参考答案:
- cache-loader:启用编译缓存
- thread-loader:启用多线程编译
- css-loader:编译 css 代码为 js
- file-loader:保存文件到输出目录,将文件内容转换成文件路径
- postcss-loader:将 css 代码使用 postcss 进行编译
- url-loader:将文件内容转换成 dataurl
- less-loader:将 less 代码转换成 css 代码
- sass-loader:将 sass 代码转换成 css 代码
- vue-loader:编译单文件组件
- babel-loader:对 JS 代码进行降级处理
-
说一下 webpack 常用插件都有哪些?
参考答案:
- clean-webpack-plugin:清除输出目录
- copy-webpack-plugin:复制文件到输出目录
- html-webpack-plugin:生成 HTML 文件
- mini-css-extract-plugin:将 css 打包成单独文件的插件
- HotModuleReplacementPlugin:热更新的插件
- purifycss-webpack:去除无用的 css 代码
- optimize-css-assets-webpack-plugin:优化 css 打包体积
- uglify-js-plugin:对 JS 代码进行压缩、混淆
- compression-webpack-plugin:gzip 压缩
- webpack-bundle-analyzer:分析打包结果
-
使用 babel-loader 会有哪些问题,可以怎样优化?
参考答案:
- 如果不做特殊处理,babel-loader 会对所有匹配的模块进行降级,这对于那些已经处理好兼容性问题的第三方库显得多此一举,因此可以使用 exclude 配置排除掉这些第三方库
- 在旧版本的 babel-loader 中,默认开启了对 ESM 的转换,这样会导致 webpack 的 tree shaking 失效,因为 tree shaking 是需要保留 ESM 语法的,所以需要关闭 babel-loader 的 ESM 转换,在其新版本中已经默认关闭了。
-
babel 是如何对 class 进行编译的?
参考答案:
本质上就是把 class 语法转换成普通构造函数定义,并做了以下处理:
- 增加了对 this 指向的检测
- 将原型方法和静态方法变为不可枚举
- 将整个代码放到了立即执行函数中,运行后返回构造函数本身
-
解释一下 babel-polyfill 的作用是什么?
说明:
babel-polyfill 已经是一个非常古老的项目了,babel 从 7.4 版本开始已不再支持它,转而使用更加强大的 core-js,此题也适用于问「core-js 的作用是什么」
参考答案:默认情况下,babel 本身只转换新的语法,而不对新的 API 进行处理。由于旧的环境中无法支持新的 API,比如 IE6 无法支持 fetch api,这就需要一个补丁,用旧语言的特性实现一遍新的 API,babel-polyfill 就是用来做这件事的。
-
解释一下 less 的&的操作符是做什么用的?
参考答案:
&符号后面的内容会和父级选择器合并书写,即中间不加入空格字符
-
在前端工程化中,可以进行哪些方面的优化?
参考答案:
-
对传输性能的优化
-
压缩和混淆
使用 Uglifyjs 或其他类似工具对打包结果进行压缩、混淆,可以有效的减少包体积
-
tree shaking
项目中尽量使用 ESM,可以有效利用 tree shaking 优化,降低包体积
-
抽离公共模块
将一些公共代码单独打包,这样可以充分利用浏览器缓存,其他代码变动后,不影响公共代码,浏览器可以直接从缓存中找到公共代码。
具体方式有多种,比如 dll、splitChunks
-
异步加载
对一些可以延迟执行的模块可以使用动态导入的方式异步加载它们,这样在打包结果中,它们会形成单独的包,同时,在页面一开始解析时并不需要加载它们,而是页面解析完成后,执行 JS 的过程中去加载它们。
这样可以显著提高页面的响应速度,在单页应用中尤其有用。
-
CDN
对一些知名的库使用 CDN,不仅可以节省打包时间,还可以显著提升库的加载速度
-
gzip
目前浏览器普遍支持 gzip 格式,因此可以将静态文件均使用 gzip 进行压缩
-
环境适配
有些打包结果中包含了大量兼容性处理的代码,但在新版本浏览器中这些代码毫无意义。因此,可以把浏览器分为多个层次,为不同层次的浏览器给予不同的打包结果。
-
-
对打包过程的优化
-
noParse
很多第三方库本身就是已经打包好的代码,对于这种代码无须再进行解析,可以使用 noParse 配置排除掉这些第三方库
-
externals
对于一些知名的第三方库可以使用 CDN,这部分库可以通过 externals 配置不进行打包
-
限制 loader 的范围
在使用 loader 的时候,可以通过 exclude 排除掉一些不必要的编译,比如 babel-loader 对于那些已经完成打包的第三方库没有必要再降级一次,可以排除掉
-
开启 loader 缓存
可以利用
cache-loader
缓存 loader 的编译结果,避免在源码没有变动时反复编译 -
开启多线程编译
可以利用
thread-loader
开启多线程编译,提升编译效率 -
动态链接库
对于某些需要打包的第三方库,可以使用 dll 的方式单独对其打包,然后 DLLPlugin 将其整合到当前项目中,这样就避免了在开发中频繁去打包这些库
-
-
对开发体验的优化
-
lint
使用 eslint、stylelint 等工具保证团队代码风格一致
-
HMR
使用热替换避免页面刷新导致的状态丢失,提升开发体验
-
-
-
如果有一个工程打包特别大-如何进行优化?
参考答案:
-
CDN
如果工程中使用了一些知名的第三方库,可以考虑使用 CDN,而不进行打包
-
抽离公共模块
如果工程中用到了一些大的公共库,可以考虑将其分割出来单独打包
-
异步加载
对于那些不需要在一开始就执行的模块,可以考虑使用动态导入的方式异步加载它们,以尽量减少主包的体积
-
压缩、混淆
-
tree shaking
尽量使用 ESM 语法进行导入导出,充分利用 tree shaking 去除无用代码
-
gzip
开启 gzip 压缩,进一步减少包体积
-
环境适配
有些打包结果中包含了大量兼容性处理的代码,但在新版本浏览器中这些代码毫无意义。因此,可以把浏览器分为多个层次,为不同层次的浏览器给予不同的打包结果。
-
-
webpack 怎么进行首屏加载的优化?
参考答案:
-
CDN
如果工程中使用了一些知名的第三方库,可以考虑使用 CDN,而不进行打包
-
抽离公共模块
如果工程中用到了一些大的公共库,可以考虑将其分割出来单独打包
-
异步加载
对于那些不需要在一开始就执行的模块,可以考虑使用动态导入的方式异步加载它们,以尽量减少主包的体积
-
压缩、混淆
-
tree shaking
尽量使用 ESM 语法进行导入导出,充分利用 tree shaking 去除无用代码
-
gzip
开启 gzip 压缩,进一步减少包体积
-
环境适配
有些打包结果中包含了大量兼容性处理的代码,但在新版本浏览器中这些代码毫无意义。因此,可以把浏览器分为多个层次,为不同层次的浏览器给予不同的打包结果。
-
-
介绍一下 webpack scope hoisting?
参考答案:
scope hoisting 是 webpack 的内置优化,它是针对模块的优化,在生产环境打包时会自动开启。
在未开启scope hoisting时,webpack 会将每个模块的代码放置在一个独立的函数环境中,这样是为了保证模块的作用域互不干扰。
而 scope hoisting 的作用恰恰相反,是把多个模块的代码合并到一个函数环境中执行。在这一过程中,webpack 会按照顺序正确的合并模块代码,同时对涉及的标识符做适当处理以避免重名。
这样做的好处是减少了函数调用,对运行效率有一定提升,同时也降低了打包体积。
但 scope hoisting 的启用是有前提的,如果遇到某些模块多次被其他模块引用,或者使用了动态导入的模块,或者是非 ESM 的模块,都不会有 scope hoisting。
-
webpack proxy 工作原理,为什么能解决跨域?
说明:
严格来说,webpack 只是一个打包工具,它并没有 proxy 的功能,甚至连服务器的功能都没有。之所以能够在 webpack 中使用 proxy 配置,是因为它的一个插件,即 webpack-dev-server 的能力。
所以,此题应该问做:「webpack-dev-server 工作原理,为什么能解决跨域?」
参考答案:首先,proxy 配置是针对开发环境的,对生产环境没有任何意义。
当我们通过 webpack-dev-server 启动开发服务器后,所有的打包资源都可以通过访问开发服务器获得。
与此同时,我们又配置了 proxy,当我们向开发服务器请求特定的地址时,开发服务器会将其代理到目标地址。因此,后续对代理地址的请求,就可以变为直接请求开发服务器。
这样一来,我们请求静态页面的域和请求代理地址的域就同源了,因为都是请求开发服务器,所以就不会产生跨域问题。
-
组件发布的是不是所有依赖这个组件库的项目都需要升级?
参考答案:
实际上就是一个版本管理的问题。
如果此次模块升级只是修复了某一些 bug,作为补丁版本升级即可,不影响主版本和次版本号
如果此次模块升级会新增一些内容,完全兼容之前的 API,作为次版本升级即可
如果此次模块升级会修改之前的 API,则作为主版本升级
在开发项目时,让项目依赖模块的主版本,因此,当模块更新时,只要不是主版本更新,项目都可以非常方便的升级模块版本,无须改动任何代码。但若涉及主版本更新,项目可以完全无视此次版本更新,仍然使用之前的旧版本,无须改动任何代码;当然也可以升级主版本,但就会涉及代码的改动,这就好比跟将 vue2 升级到 vue3 会涉及大量改动一样。
而在开发模块时,在一开始就要精心设计 API,尽量保证 API 的接口稳定,不要经常变动主版本号。如果实在要更新主版本,就需要在一段时间内同时维护两个版本(新的主版本,旧的主版本),给予其他项目一定的升级时间。
-
开发过程中,如何进行公共组件的设计?(字节跳动)
参考答案:
-
确定使用场景
明确这个公共组件的需求是怎么产生的,它目前的使用场景有哪些,将来还可能出现哪些使用场景。
明确使用场景至关重要,它决定了这个组件的使用边界在哪,通用到什么程度,从而决定了这个组件的开发难度
-
设计组件功能
根据其使用场景,设计出组件的属性、事件、使用说明文档
-
测试用例
根据使用说明文档编写组件测试用例
-
完成开发
根据使用说明文档、测试用例完成开发
-
-
说一下项目里有做过哪些 webpack 上的优化(字节跳动)
参考答案:
-
对传输性能的优化
-
压缩和混淆
使用 Uglifyjs 或其他类似工具对打包结果进行压缩、混淆,可以有效的减少包体积
-
tree shaking
项目中尽量使用 ESM,可以有效利用 tree shaking 优化,降低包体积
-
抽离公共模块
将一些公共代码单独打包,这样可以充分利用浏览器缓存,其他代码变动后,不影响公共代码,浏览器可以直接从缓存中找到公共代码。
具体方式有多种,比如 dll、splitChunks
-
异步加载
对一些可以延迟执行的模块可以使用动态导入的方式异步加载它们,这样在打包结果中,它们会形成单独的包,同时,在页面一开始解析时并不需要加载它们,而是页面解析完成后,执行 JS 的过程中去加载它们。
这样可以显著提高页面的响应速度,在单页应用中尤其有用。
-
CDN
对一些知名的库使用 CDN,不仅可以节省打包时间,还可以显著提升库的加载速度
-
gzip
目前浏览器普遍支持 gzip 格式,因此可以将静态文件均使用 gzip 进行压缩
-
环境适配
有些打包结果中包含了大量兼容性处理的代码,但在新版本浏览器中这些代码毫无意义。因此,可以把浏览器分为多个层次,为不同层次的浏览器给予不同的打包结果。
-
-
对打包过程的优化
-
noParse
很多第三方库本身就是已经打包好的代码,对于这种代码无须再进行解析,可以使用 noParse 配置排除掉这些第三方库
-
externals
对于一些知名的第三方库可以使用 CDN,这部分库可以通过 externals 配置不进行打包
-
限制 loader 的范围
在使用 loader 的时候,可以通过 exclude 排除掉一些不必要的编译,比如 babel-loader 对于那些已经完成打包的第三方库没有必要再降级一次,可以排除掉
-
开启 loader 缓存
可以利用
cache-loader
缓存 loader 的编译结果,避免在源码没有变动时反复编译 -
开启多线程编译
可以利用
thread-loader
开启多线程编译,提升编译效率 -
动态链接库
对于某些需要打包的第三方库,可以使用 dll 的方式单独对其打包,然后 DLLPlugin 将其整合到当前项目中,这样就避免了在开发中频繁去打包这些库
-
-
对开发体验的优化
-
lint
使用 eslint、stylelint 等工具保证团队代码风格一致
-
HMR
使用热替换避免页面刷新导致的状态丢失,提升开发体验
-
-
-
具体说一下 splitchunksplugin 的使用场景及使用方法。(字节跳动)
参考答案:
-
公共模块
比如某些多页应用会有多个入口,从而形成多个 chunk,而这些 chunk 中用到了一些公共模块,为了减少整体的包体积,可以使用 splitchunksplugin 将公共模块分离出来。
可以配置 minChunks 来指定被多少个 chunk 引用时进行分包
-
并行下载
由于 HTML5 支持 defer 和 async,因此可以同时下载多个 JS 文件以充分利用带宽。如果打包结果是一个很大的文件,就无法利用到这一点。
可以利用 splitchunks 插件将文件进行拆分,通过配置 maxSize 属性指定包体积达到多大时进行拆分
-
-
描述一下 webpack 的构建流程?(CVTE)
参考答案:
- 初始化参数:从配置文件和 Shell 语句中读取与合并参数,得出最终的参数
- 开始编译 :用上一步得到的参数初始化 Compiler 对象,加载所有配置的插件,执行对象的
run
方法开始执行编译 - 确定入口 :根据配置中的
entry
找出所有的入口文件 - 编译模块 :从入口文件出发,调用所有配置的
loader
对模块进行翻译,再把翻译后的内容转换成 AST,通过对 AST 的分析找出该模块依赖的模块,再递归
本步骤直到所有入口依赖的文件都经过了本步骤的处理 - 完成模块编译 :在经过第 4 步使用
loader
翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系图
- 输出资源 :根据入口和模块之间的依赖关系,组装成一个个包含多个模块的
Chunk
,再把每个 Chunk 转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会 - 输出完成:在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统
-
解释一下 webpack 插件的实现原理?(CVTE)
参考答案:
本质上,webpack 的插件是一个带有
apply
函数的对象。当 webpack 创建好 compiler 对象后,会执行注册插件的 apply 函数,同时将 compiler 对象作为参数传入。在 apply 函数中,开发者可以通过 compiler 对象监听多个钩子函数的执行,不同的钩子函数对应 webpack 编译的不同阶段。当 webpack 进行到一定阶段后,会调用这些监听函数,同时将 compilation 对象传入。开发者可以使用 compilation 对象获取和改变 webpack 的各种信息,从而影响构建过程。
-
有用过哪些插件做项目的分析吗?(CVTE)
参考答案:
用过 webpack-bundle-analyzer 分析过打包结果,主要用于优化项目打包体积
-
什么是 babel,有什么作用?
参考答案:
babel 是一个 JS 编译器,主要用于将下一代的 JS 语言代码编译成兼容性更好的代码。
它其实本身做的事情并不多,它负责将 JS 代码编译成为 AST,然后依托其生态中的各种插件对 AST 中的语法和 API 进行处理
-
解释一下 npm 模块安装机制是什么?
参考答案:
- npm 会检查本地的 node_modules 目录中是否已经安装过该模块,如果已经安装,则不再重新安装
- npm 检查缓存中是否有相同的模块,如果有,直接从缓存中读取安装
- 如果本地和缓存中均不存在,npm 会从 registry 指定的地址下载安装包,然后将其写入到本地的 node_modules 目录中,同时缓存起来。
前端工程化面试题
monkey-papa2023-09-23 23:58
相关推荐
彭世瑜几秒前
ts: TypeScript跳过检查/忽略类型检查FØund4042 分钟前
antd form.setFieldsValue问题总结Backstroke fish2 分钟前
Token刷新机制小五Five3 分钟前
TypeScript项目中Axios的封装小曲程序3 分钟前
vue3 封装request请求临枫5414 分钟前
Nuxt3封装网络请求 useFetch & $fetch前端每日三省5 分钟前
面试题-TS(八):什么是装饰器(decorators)?如何在 TypeScript 中使用它们?小刺猬_9856 分钟前
(超详细)数组方法 ——— splice( )渊兮兮7 分钟前
Vue3 + TypeScript +动画,实现动态登陆页面鑫宝Code7 分钟前
【TS】TypeScript中的接口(Interface):对象类型的强大工具