该内容主要整理关于 Webpack 的相关面试题,其他内容面试题请移步至 2021 最新最全的前端面试题集锦 查看。
目录
- 一、webpack 面试题(附答案)
- 1. 谈谈你对webpack的看法?
- 2. webpack的基本功能和工作原理?
- 3. webpack构建过程?
- 4. webpack打包原理?
- 5. webpack与gulp、grunt有什么区别?
- 6. 什么是 entry,output ?
- 7. 什么是 loader,plugins?
- 8. 有哪些常见的 Loader?你用过哪些Loader?
- 9. 有哪些常见的 Plugin?你用过哪些 Plugin?
- 10. 说一说 Loader 和 Plugin 的区别?
- 11. 什么是 bundle,chunk,module?
- 12. 如何自动生成 webpack 配置?
- 13. webpack 如何配置单页面和多页面的应用程序?
- 14. webpack-dev-server 和 http 服务器如 nginx 有什么区别?
- 15. 什么是模块热更新?
- 16. dev-server 是怎么跑起来的?
- 17. 什么是长缓存?在 webpack 中如何做到长缓存优化?
- 18. 什么是 Tree-shaking?CSS 可以 Tree-shaking?
- 19. webpack 的构建流程是什么?从读取配置到输出文件这个过程尽量说全?
- 20. 如何利用 webpack 来优化前端性能?(提高性能和体验)
- 21. 如何提高 webpack 的构建速度?
- 22. 使用 webpack 开发时,你用过哪些可以提高效率的插件?
- 23. source map 是什么?生产环境怎么用?
- 24. 如何在vue项目中实现按需加载?
- 25. 文件指纹是什么?怎么用?
- 26. 在实际工程中,配置文件上百行乃是常事,如何保证各个 loader 按照预想方式工作?
- 二、webpack 相关原理面试题(附答案)
一、webpack 面试题(附答案)
1. 谈谈你对webpack的看法?
webpack 是一个模块打包工具,可以使用它管理项目中的模块依赖,并编译输出模块所需的静态文件。它可以很好地管理、打包开发中所用到的HTML、CSS、JavaScript和静态文件(图片,字体)等,让开发更高效。对于不同类型的依赖,webpack 有对应的模块加载器,而且会分析模块间的依赖关系,最后合并生成优化的静态资源。
2. webpack的基本功能和工作原理?
- 代码转换:TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等等;
- 文件优化:压缩 JavaScript、CSS、HTML 代码,压缩合并图片等;
- 代码分割:提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载;
- 模块合并:在采用模块化的项目有很多模块和文件,需要构建功能把模块分类合并成一个文件
- 自动刷新(热更新):监听本地源代码的变化,自动构建,刷新浏览器;
- 代码校验(eslint):在代码被提交到仓库前需要检测代码是否符合规范,以及单元测试是否通过;
- 自动发布:更新完代码后,自动构建出线上发布代码并传输给发布系统。
3. webpack构建过程?
- 从
entry
里配置的module
开始递归解析entry
依赖的所有module
; - 每找到一个
module
,就会根据配置的loader
去找对应的转换规则; - 对
module
进行转换后,再解析出当前module
依赖的module
; - 这些模块会以
entry
为单位分组,一个entry
和其所有依赖的module
被分到一个组Chunk
; - 最后 webpack 会把所有
Chunk
转换成文件输出; - 在整个流程中 webpack 会在恰当的时机执行
plugin
里定义的逻辑。
4. webpack打包原理?
将所有依赖打包成一个bundle.js,通过代码分割成单元片段按需加载
5. webpack与gulp、grunt有什么区别?
- 三者都是前端构建工具,grunt 和 gulp 在早期比较流行 ,现在 webpack 相对来说比较主流,不过一些轻量化的任务还是会用 gulp 来处理,比如单独打包CSS文件等。
- grunt 和 gulp 是基于任务和流(Task、Stream)的。类似 jQuery,找到一个(或一类)文件,对其做一系列链式操作,更新流上的数据, 整条链式操作构成了一个任务,多个任务就构成了整个 web 的构建流程。
- webpack 是基于入口的。webpack 会自动地递归解析入口所需要加载的所有资源文件,然后用不同的 Loader 来处理不同的文件,用 Plugin 来扩展webpack 功能。
- 总结:
- 从构建思路来说
- gulp 和 grunt 需要开发者将整个前端构建过程拆分成多个
Task
,并合理控制所有Task
的调用关系; - webpack 需要开发者找到入口,并需要清楚对于不同的资源应该使用什么 Loader 做何种解析和加工;
- gulp 和 grunt 需要开发者将整个前端构建过程拆分成多个
- 对于知识背景来说
- gulp 更像后端开发者的思路,需要对于整个流程了如指掌;
- webpack 更倾向于前端开发者的思路;
- 从构建思路来说
6. 什么是 entry,output ?
entry
入口,告诉 webpack 要使用哪个模块作为构建项目的起点,默认为./src/index.js
output
出口,告诉 webpack 在哪里输出它打包好的代码以及如何命名,默认为./dist
7. 什么是 loader,plugins?
loader
是用来告诉 webpack 如何转换某一类型的文件,并且引入到打包出的文件中plugins
(插件):作用更大,可以打包优化,资源管理和注入环境变量
8. 有哪些常见的 Loader?你用过哪些Loader?
-
raw-loader
:加载文件原始内容(utf-8) -
vue-loader
:加载Vue.js
单文件组件 -
file-loader
:把文件输出到一个文件夹中,在代码中通过相对 URL 去引用输出的文件(处理图片和字体) -
url-loader
:与file-loader
类似,区别是用户可以设置一个阈值,大于阈值会交给file-loader
处理,小于阈值时返回文件base64
形式编码 (处理图片和字体) -
source-map-loader
:加载额外的Source Map
文件,以方便断点调试 -
svg-inline-loader
:将压缩后的 SVG 内容注入代码中 -
image-loader
:加载并且压缩图片文件 -
json-loader
: 加载 JSON 文件(默认包含) -
handlebars-loader
:将Handlebars
模版编译成函数并返回 -
babel-loader
:把 ES6 转换成 ES5 -
ts-loader
:将 TypeScript 转换成 JavaScript -
awesome-typescript-loader
:将 TypeScript 转换成 JavaScript,性能优于ts-loader
-
sass-loader
:将SCSS/SASS
代码转换成 CSS -
css-loader
:加载 CSS,支持模块化、压缩、文件导入等特性 -
style-loader
:把 CSS 代码注入到 JavaScript 中,通过 DOM 操作去加载 CSS -
postcss-loader
:扩展 CSS 语法,使用下一代 CSS,可以配合autoprefixer
插件自动补齐 CSS3 前缀 -
eslint-loader
:通过ESLint
检查 JavaScript 代码 -
tslint-loader
:通过TSLint
检查 TypeScript 代码 -
mocha-loader
:加载Mocha
测试用例的代码 -
coverjs-loader
:计算测试的覆盖率 -
i18n-loader
:国际化 -
cache-loader
:可以在一些性能开销较大的Loader
之前添加,目的是将结果缓存到磁盘里
更多 Loader 请参考官网
9. 有哪些常见的 Plugin?你用过哪些 Plugin?
define-plugin
:定义环境变量(Webpack4 之后指定 mode 会自动配置)commons-chunk-plugin
:提取公共代码ignore-plugin
:忽略部分文件html-webpack-plugin
:简化 HTML 文件创建(依赖于html-loader
)web-webpack-plugin
:可方便地为单页应用输出 HTML,比html-webpack-plugin
好用uglifyjs-webpack-plugin
:不支持 ES6 压缩(Webpack4 以前)terser-webpack-plugin
: 支持压缩 ES6(Webpack4)webpack-parallel-uglify-plugin
:多进程执行代码压缩,提升构建速度mini-css-extract-plugin
:分离样式文件,CSS 提取为独立文件,支持按需加载(替代extract-text-webpack-plugi)serviceworker-webpack-plugin
:为网页应用增加离线缓存功能clean-webpack-plugin
:目录清理ModuleConcatenationPlugin
:开启 Scope Hoistingspeed-measure-webpack-plugin
:可以看到每个 Loader 和 Plugin 执行耗时 (整个打包耗时、每个 Plugin 和 Loader 耗时)webpack-bundle-analyzer
:可视化 Webpack 输出文件的体积(业务组件、依赖第三方模块)
更多 Plugin 请参考官网
10. 说一说 Loader 和 Plugin 的区别?
- 作用不同:
Loader
本质就是一个函数,在该函数中对接收到的内容进行转换,返回转换后的结果。因为 Webpack 只认识 JavaScript,所以Loader
就成了翻译官,对其他类型的资源进行转译的预处理工作。Plugin
就是插件,基于事件流框架 Tapable,插件可以扩展 Webpack 的功能,在 Webpack 运行的生命周期中会广播出许多事件,Plugin
可以监听这些事件,在合适的时机通过 Webpack 提供的 API 改变输出结果。
- 用法不同:
Loader
在module.rules
中配置,作为模块的解析规则,类型为数组。每一项都是一个Object
,内部包含了test
(类型文件)、loader
、options
(参数)等属性。Plugin
在plugins
中单独配置,类型为数组,每一项是一个Plugin
的实例,参数都通过构造函数传入。
11. 什么是 bundle,chunk,module?
bundle
是 webpack 打包出来的文件chunk
是 webpack 在进行模块的依赖分析的时候,代码分割出来的代码块module
是开发中的单个模块
12. 如何自动生成 webpack 配置?
可以用一些官方脚手架:
- webpack-cli
- vue-cli
13. webpack 如何配置单页面和多页面的应用程序?
-
单页面
单页应用可以理解为 webpack 的标准模式,直接在
entry
中指定单页应用的入口即可module.exports = { entry: './path/to/my/entry/file.js' }
-
多页面应用程序
多页应用的话,可以使用 webpack 的
AutoWebPlugin
来完成简单自动化的构建,但是前提是项目的目录结构必须遵守他预设的规范。 多页应用中要注意的是:- 每个页面都有公共的代码,可以将这些代码抽离出来,避免重复的加载。比如,每个页面都引用了同一套css样式表
- 随着业务的不断扩展,页面可能会不断的追加,所以一定要让入口的配置足够灵活,避免每次添加新页面还需要修改构建配置
module.entrys = { entry: { pageOne: './src/pageOne/index.js', pageTwo: './src/pageTwo/index.js' } }
14. webpack-dev-server 和 http 服务器如 nginx 有什么区别?
webpack-dev-server 使用内存来存储 webpack 开发环境下的打包文件,并且可以使用模块热更新,相比传统 http 服务器开发更加简单高效
15. 什么是模块热更新?
模块热更新 是 webpack 的一个功能,可以使代码修改后不用刷新浏览器就自动更新,高级版的自动刷新浏览器。
16. dev-server 是怎么跑起来的?
webpack-dev-server
支持两种模式来自动刷新页面:
iframe
模式(页面放在iframe
中,当发送改变时重载) 无需额外配置,只要以这种格式url
访问即可。
http://localhost:8080/webpack-dev-server/index.html
inline
模式(将webpack-dev-server
的客户端入口添加到bundle
中)inline
模式下url
不用发生变化,启动inline
模式分两种情况:// 启动 inline 模式分两种情况: // 方式1,以命令行启动 webpack-dev-server 有两种方式: // 1:在命令行中添加--inline命令 // 2:在webpack-config.js添加devServer:{inline: true} // 方式2,以 node.js API 启动有两种方式: // 1:添加 webpack-dev-server/client?http://localhost:8080/ 到 webpack 配置的 entry 入口点 config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/"); // 2:将<script src="http://localhost:8080/webpack-dev-server.js"></script>添加到html文件中
17. 什么是长缓存?在 webpack 中如何做到长缓存优化?
- 浏览器在用户访问页面的时候,为了加快加载速度会对用户访问的静态资源进行存储,但是每一次代码升级或更新都需要浏览器下载新的代码,最简单方便的方式就是引入新的文件名称。
- webpack 中可以在
output
中指定chunkhash
,并且分离经常更新的代码和框架代码。通过NameModulesPlugin
或HashedModuleIdsPlugin
使再次打包文件名不变。
18. 什么是 Tree-shaking?CSS 可以 Tree-shaking?
Tree-shaking
是指在打包中取出那些引入了但在代码中没有被用到的死代码。webpack 中通过 uglifysPlugin
来 Tree-shaking
JS。CSS 需要使用 purify-CSS
19. webpack 的构建流程是什么?从读取配置到输出文件这个过程尽量说全?
Webpack 的运行流程是一个串行的过程,从启动到结束会依次执行以下流程:
-
初始化参数:从配置文件和 Shell 语句中读取与合并参数,得出最终的参数;
-
开始编译:用上一步得到的参数初始化
Compiler
对象,加载所有配置的插件,执行对象的run
方法开始执行编译; -
确定入口:根据配置中的
entry
找出所有的入口文件; -
编译模块:从入口文件出发,调用所有配置的
Loader
对模块进行翻译,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理; -
完成模块编译:在经过第4步使用
Loader
翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系; -
输出资源:根据入口和模块之间的依赖关系,组装成一个个包含多个模块的
Chunk
,再把每个Chunk
转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会; -
输出完成:在确定好输出内容后,根据
output
配置确定输出的路径和文件名,把文件内容写入到文件系统。在以上过程中,Webpack 会在特定的时间点广播出特定的事件,插件在监听到感兴趣的事件后会执行特定的逻辑,并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。
简单说
- 初始化:启动构建,读取与合并配置参数,加载
Plugin
,实例化Compiler
- 编译:从
entry
出发,针对每个Module
串行调用对应的Loader
去翻译文件的内容,再找到该Module
依赖的Module
,递归地进行编译处理 - 输出:将编译后的
Module
组合成Chunk
,将Chunk
转换成文件,输出到文件系统中
20. 如何利用 webpack 来优化前端性能?(提高性能和体验)
用 webpack 优化前端性能是指优化 webpack 的输出结果,让打包的最终结果在浏览器运行快速高效。
- 压缩代码。删除多余的代码、注释、简化代码的写法等等方式。可以利用 webpack 的
UglifyJsPlugin
和ParallelUglifyPlugin
来压缩JS文件, 利用cssnano
(css-loader
?minimize
)来压缩 css - 利用 CDN 加速。在构建过程中,将引用的静态资源路径修改为 CDN 上对应的路径。可以利用 webpack 对于
output
参数和各loader
的publicPath
参数来修改资源路径 - 删除死代码(
Tree Shaking
)。将代码中永远不会走到的片段删除掉。可以通过在启动 webpack 时追加参数--optimize-minimize
来实现 - 提取公共代码。使用
CommonsChunkPlugin
来提取公共代码
21. 如何提高 webpack 的构建速度?
-
使用高版本的 Webpack 和 Node.js
-
多进程/多实例构建:使用
HappyPack
(不维护了) 、thread-loader
实现多线程加速编译 -
压缩代码:
- 多进程并行压缩
webpack-paralle-uglify-plugin
uglifyjs-webpack-plugin
开启parallel
参数 (不支持ES6)terser-webpack-plugin
开启parallel
参数
- 通过
mini-css-extract-plugin
提取Chunk
中的 CSS 代码到单独文件,通过css-loader
的minimize
选项开启cssnano
压缩 CSS。
- 多进程并行压缩
-
图片压缩:
- 使用基于 Node 库的
imagemin
(很多定制选项、可以处理多种图片格式) - 配置
image-webpack-loader
- 使用基于 Node 库的
-
缩小打包作用域:
exclude
/include
(确定 loader 规则范围)resolve.modules
指明第三方模块的绝对路径 (减少不必要的查找)resolve.mainFields
只采用main
字段作为入口文件描述字段 (减少搜索步骤,需要考虑到所有运行时依赖的第三方模块的入口文件描述字段)resolve.extensions
尽可能减少后缀尝试的可能性noParse
对完全不需要解析的库进行忽略 (不去解析但仍会打包到bundle
中,注意被忽略掉的文件里不应该包含import
、require
、define
等模块化语句)IgnorePlugin
(完全排除模块)- 合理使用
alias
-
提取页面公共资源:
- 基础包分离:
- 使用
html-webpack-externals-plugin
,将基础包通过 CDN 引入,不打入bundle
中 - 使用
SplitChunksPlugin
进行(公共脚本、基础包、页面公共文件)分离(Webpack4内置) ,替代了CommonsChunkPlugin
插件
- 使用
- 基础包分离:
-
DLL
:- 使用
DllPlugin
进行分包,使用DllReferencePlugin
(索引链接) 对manifest.json
引用,让一些基本不会改动的代码先打包成静态资源,避免反复编译浪费时间。 HashedModuleIdsPlugin
可以解决模块数字 id 问题
- 使用
-
充分利用缓存提升二次构建速度:
babel-loader
开启缓存terser-webpack-plugin
开启缓存- 使用
cache-loader
或者hard-source-webpack-plugin
-
Tree shaking
:- 打包过程中检测工程中没有引用过的模块并进行标记,在资源压缩时将它们从最终的
bundle
中去掉(只能对ES6 Modlue生效) 开发中尽可能使用ES6 Module的模块,提高tree shaking
效率 - 禁用
babel-loader
的模块依赖解析,否则 Webpack 接收到的就都是转换过的 CommonJS 形式的模块,无法进行tree-shaking
- 使用
PurifyCSS
(不在维护) 或者uncss
去除无用 CSS 代码purgecss-webpack-plugin
和mini-css-extract-plugin
配合使用(建议)
- 打包过程中检测工程中没有引用过的模块并进行标记,在资源压缩时将它们从最终的
-
Scope hoisting
:- 构建后的代码会存在大量闭包,造成体积增大,运行代码时创建的函数作用域变多,内存开销变大。
Scope hoisting
将所有模块的代码按照引用顺序放在一个函数作用域里,然后适当的重命名一些变量以防止变量名冲突 - 必须是ES6的语法,因为有很多第三方库仍采用
CommonJS
语法,为了充分发挥Scope hoisting
的作用,需要配置mainFields
对第三方模块优先采用jsnext:main
中指向的ES6模块化语法
- 构建后的代码会存在大量闭包,造成体积增大,运行代码时创建的函数作用域变多,内存开销变大。
-
动态
Polyfill
:- 建议采用
polyfill-service
只给用户返回需要的polyfill
,社区维护。 (部分国内奇葩浏览器UA可能无法识别,但可以降级返回所需全部polyfill
)
- 建议采用
或者:
- 多入口情况下,使用
CommonsChunkPlugin
来提取公共代码 - 通过
externals
配置来提取常用库 - 利用
DllPlugin
和DllReferencePlugin
预编译资源模块 通过DllPlugin
来对那些我们引用但是绝对不会修改的 npm 包来进行预编译,再通过DllReferencePlugin
将预编译的模块加载进来。 - 使用
Happypack
实现多线程加速编译 - 使用
webpack-uglify-parallel
来提升uglifyPlugin
的压缩速度。 原理上webpack-uglify-parallel
采用了多核并行压缩来提升压缩速度 - 使用
Tree-shaking
和Scope Hoisting
来剔除多余代码
22. 使用 webpack 开发时,你用过哪些可以提高效率的插件?
webpack-dashboard
:可以更友好的展示相关打包信息。webpack-merge
:提取公共配置,减少重复配置代码。speed-measure-webpack-plugin
:简称 SMP,分析出 Webpack 打包过程中Loader
和Plugin
的耗时,有助于找到构建过程中的性能瓶颈。size-plugin
:监控资源体积变化,尽早发现问题。HotModuleReplacementPlugin
:模块热替换。
23. source map 是什么?生产环境怎么用?
source map
是将编译、打包、压缩后的代码映射回源代码的过程。打包压缩后的代码不具备良好的可读性,想要调试源码就需要 soucre map
。
map
文件只要不打开开发者工具,浏览器是不会加载的。
线上环境一般有三种处理方案:
hidden-source-map
:借助第三方错误监控平台 Sentry 使用nosources-source-map
:只会显示具体行数以及查看源代码的错误栈。安全性比sourcemap
高sourcemap
:通过nginx
设置将.map
文件只对白名单开放(公司内网)
注意:避免在生产中使用 inline-
和 eval-
,因为它们会增加 bundle
体积大小,并降低整体性能。
24. 如何在vue项目中实现按需加载?
25. 文件指纹是什么?怎么用?
文件指纹是打包后输出的文件名的后缀。
Hash
:和整个项目的构建相关,只要项目文件有修改,整个项目构建的hash
值就会更改Chunkhash
:和 Webpack 打包的chunk
有关,不同的entry
会生出不同的chunkhash
Contenthash
:根据文件内容来定义hash
,文件内容不变,则contenthash
不变
JS的文件指纹设置
设置 output
的 filename
,用 chunkhash
。
module.exports = {
entry: {
app: './scr/app.js',
search: './src/search.js'
},
output: {
filename: '[name][chunkhash:8].js',
path:__dirname + '/dist'
}
}
CSS的文件指纹设置
设置 MiniCssExtractPlugin
的 filename
,使用 contenthash
。
module.exports = {
entry: {
app: './scr/app.js',
search: './src/search.js'
},
output: {
filename: '[name][chunkhash:8].js',
path:__dirname + '/dist'
},
plugins:[
new MiniCssExtractPlugin({
filename: `[name][contenthash:8].css`
})
]
}
图片的文件指纹设置
设置 file-loader
的 name
,使用 hash
。
占位符名称及含义:
ext
:资源后缀名name
:文件名称path
:文件的相对路径folder
:文件所在的文件夹contenthash
:文件的内容hash
,默认是md5
生成hash
:文件内容的hash
,默认是md5
生成emoji
:一个随机的指代文件内容的emoj
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename:'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module:{
rules:[{
test:/\.(png|svg|jpg|gif)$/,
use:[{
loader:'file-loader',
options:{
name:'img/[name][hash:8].[ext]'
}
}]
}]
}
}
26. 在实际工程中,配置文件上百行乃是常事,如何保证各个 loader 按照预想方式工作?
可以使用 enforce
强制执行 loader
的作用顺序
pre
优先处理normal
正常处理(默认)inline
其次处理(官方不推荐使用)post
最后处理
二、webpack 相关原理面试题(附答案)
1. 模块打包原理?
Webpack 实际上为每个模块创造了一个可以导出和导入的环境,本质上并没有修改 代码的执行逻辑,代码执行顺序与模块加载顺序也完全一致。
2. 文件监听原理?
在发现源码发生变化时,自动重新构建出新的输出文件。
Webpack开启监听模式,有两种方式:
- 启动 webpack 命令时,带上
--watch
参数 - 在配置
webpack.config.js
中设置watch: true
缺点:每次需要手动刷新浏览器
原理:轮询判断文件的最后编辑时间是否变化,如果某个文件发生了变化,并不会立刻告诉监听者,而是先缓存起来,等 aggregateTimeout
后再执行。
module.export = {
// 默认false,也就是不开启
watch: true,
// 只有开启监听模式时,watchOptions才有意义
watchOptions: {
// 默认为空,不监听的文件或者文件夹,支持正则匹配
ignored: /node_modules/,
// 监听到变化发生后会等300ms再去执行,默认300ms
aggregateTimeout:300,
// 判断文件是否发生变化是通过不停询问系统指定文件有没有变化实现的,默认每秒问1000次
poll:1000
}
}
3. Webpack 的热更新原理?
Webpack 的热更新又称热替换(Hot Module Replacement
),缩写为 HMR
。 这个机制可以做到不用刷新浏览器而将新变更的模块替换掉旧的模块。
HMR
的核心就是客户端从服务端拉去更新后的文件,准确的说是 chunk diff
(chunk
需要更新的部分),实际上 webpack-dev-server
(WDS
) 与浏览器之间维护了一个 Websocket
,当本地资源发生变化时,WDS
会向浏览器推送更新,并带上构建时的 hash
,让客户端与上一次资源进行对比。客户端对比出差异后会向 WDS
发起 Ajax
请求来获取更改内容(文件列表、hash
),这样客户端就可以再借助这些信息继续向 WDS
发起 jsonp
请求获取该 chunk
的增量更新。
后续的部分(拿到增量更新之后如何处理?哪些状态该保留?哪些又需要更新?)由 HotModulePlugin
来完成,提供了相关 API 以供开发者针对自身场景进行处理,像 react-hot-loader
和 vue-loader
都是借助这些 API 实现 HMR
(Hot Module Replacement
)。
4. 如何对 bundle 体积进行监控和分析?
VSCode 中有一个插件 Import Cost
可以帮助我们对引入模块的大小进行实时监测,还可以使用 webpack-bundle-analyzer
生成 bundle
的模块组成图,显示所占体积。
bundlesize
工具包可以进行自动化资源体积监控。
5. 代码分割的本质是什么?有什么意义呢?
-
代码分割的本质其实就是在 源代码直接上线 和 打包成唯一脚本
main.bundle.js
这两种极端方案之间的一种更适合实际场景的中间状态。 -
代码分割(code splitting)是webpack相当重要的一个特性。它可以让代码分割到不同的文件(bundle)中,以便按需或者并行加载这些文件。代码分割可以得到更小的文件,控制资源加载的优先级。如果使用得当,更是可以优化加载的时间。
-
代码分割的方法
官网给出了三种常用的代码分割的方法:
-
Entry Points
:入口文件设置的时候可以配置这种是最简单也是最直观的代码分割方式,但是会存在一些问题。方法就是在 webpack 配置文件中的
entry
字段添加新的入口:const path = require('path'); module.exports = { entry: { index: './src/index.js', another: './src/another-module.js' }, output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') } };
就会分割出来了一个新的
bundle
。但是会有两个问题:- 如果入口
chunks
之间包含重复的模块,那些重复模块都会被引入到各个bundle
中 - 这种方法不够灵活,并且不能将核心应用程序逻辑进行动态拆分代码
举个例子,index 和 another 这两个入口文件都包含了
lodash
这个模块,那分割出来的两个bundle
都会包含lodash
这个模块,冗余了。解决这个问题就需要CommonsChunkPlugin
插件。 - 如果入口
-
CommonsChunkPlugin
:这个插件可以抽取所有入口文件都依赖了的模块,把这些模块抽取成一个新的bundle
具体用法如下:
const path = require('path'); module.exports = { entry: { index: './src/index.js', another: './src/another-module.js' }, plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: 'common' // bundle 名称 }) ], output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') } };
可以看到,原来的 index 和 another 两个
bundle
的体积大大的减小了。并且多了一个574k的common bundle
。这个文件就是抽离出来的lodash
模块。这样就可以把业务代码,和第三方模块代码分割开了。 -
Dynamic Imports
:动态导入。通过模块的内联函数调用来分割Webpack 的动态分割主要方式是使用符合 ECMAScript 提案的
import()
语法。语法如下:import('path/to/module') -> Promise
传入模块的路径,
import()
会返回一个Promise
。这个模块就会被当作分割点。意味着这个模块和它的子模块都会被分割成一个单独的chunk
。并且,在 webpack 配置文件的output
字段,需要添加一个chunkFileName
属性。它决定非入口chunk
的名称。// vue-cli 生成的webpack.prod.conf.js // 注意 output 的 chunkFilename 属性 // 这种写法分割出来的 bundle 会以 id + hash 的命名方式 // 比如 1.32326e28f3acec4b3a9a.js output: { path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash].js'), chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') },
这个动态代码分割功能是我们实现按需加载的前提。在 vue 的项目里,我们最终想要达到这样一个效果:
- 把每个路由所包含的组件,都分割成一个单独的
bundle
- 当路由被访问的时候才加载该路由对应的
bundle
第一个点通过上面的
import()
就已经可以实现了。要实现第二点,需要用到 vue 里面的异步组件特性。Vue 允许将组件定义为一个工厂函数,异步地解析组件的定义。只在组件需要渲染时触发工厂函数,并且把结果缓存起来,用于后面的再次渲染。
Vue.component('async-example', function (resolve, reject) { setTimeout(function () { // 将组件定义传入 resolve 回调函数 resolve({ template: '<div>I am async!</div>' }) }, 1000) })
在工厂函数中可以返回
Promise
,而import()
也是返回Promise
的,这样就把异步组件和import()
结合起来了。使用import()
后,工厂函数的写法:Vue.component('async-webpack-example', // 该 `import` 函数返回一个 `Promise` 对象。 () => import('./my-async-component') )
最后在
vue-router
的路由配置中,我们只需要这么写:const router = new VueRouter({ routes: [ { path: '/login', component: () => import('@/views/login'), }, { path: '/home', component: () => import('@/views/home'), } ] })
结合 Vue 的异步组件和 Webpack 的代码分割功能,在
vue-router
中,我们轻松实现了路由组件的按需加载。所以,文章开头的问题在这里就可以解答了。以0-7数字开头的 js 文件,就是每个路由对应的组件构建出来的 bundle。只有用户访问对应的路由时,才会加载相应的 bundle,提高页面加载效率。 - 把每个路由所包含的组件,都分割成一个单独的
-
6. 聊一聊 babel 原理吧?
大多数JavaScript Parser遵循 estree
规范,Babel
最初基于 acorn
项目(轻量级现代 JavaScript 解析器)
Babel
大概分为三大部分:
-
解析:将代码转换成
AST
- 词法分析:将代码(字符串)分割为
token
流,即语法单元成的数组 - 语法分析:分析
token
流(上面生成的数组)并生成AST
- 词法分析:将代码(字符串)分割为
-
转换:访问
AST
的节点进行变换操作生产新的AST
Taro
就是利用babel
完成的小程序语法转换
-
生成:以新的
AST
为基础生成代码
Webpack 系列面试题持续更新中。。。欢迎关注