【面试题】 webpack面试篇_webpack面试题

source map的类型：

• source-map：原始代码，最好的source map有完整的结果，但是会很慢
• eval-source-map：原始代码，同样道理，但是最高的质量和最低的性能
• cheap-module-eval-source-map：原始代码（只有行内），但是最高的质量和最低的性能
• cheap-eval-source-map：转换代码（行内），每个模块被eval执行，并且sourcemap作为eval的一个dataurl
• eval：生成代码，每个模块都被eval执行，并且存在@sourceURL，带eval的构建模式能cache SourceMap
• cheap-source-map：转换代码（行内），生成sourcemap没有映射，从loaders生成sourcemap没有被使用
• cheap-module-source-map：原始代码（只有行内）与上面的一样除了每行特点的loader中进行映射

看似配置很多，其实只有五个关键自：eval、source-map、cheap、module和inline的任意组合

关键字及其含义：

• eval：使用eval包裹模块代码
• source-map：生成.map文件
• cheap：不包含列信息和loader的sourcemap
• module：包含loader的sourcemap（比如 jsx to js，babel的sourcemap），否则无法定义源文件
• inline：将.map作为DataURL嵌入，不单独生成.map文件

如何选择source map的类型

首先在源代码的列信息是没有意义的，只要有行信息就能完整的建立打包前后代码之间的依赖关系，因此，不管是开发还是生产环境都可以选择不包含列信息。

开发环境建议使用：cheap-module-eval-source-map

生成环境使用：cheap-module-source-map

6、如何利用webpack来优化前端性能？

1. 压缩js  TerserPlugin({})
2. 压缩css OptimizeCSSAssetsPlugin({})
3. 压缩图片 image-webpack-loader
4. 清除无用的css（定义并未使用）：PurgecssPlugin
5. Tree Shaking:

• 一个模块有多个方法，只要其中某个方法用到了，则整个文件都会打到bundle里面去，tree shaking就是只把用到的方法打包，没用到的方法会在ugligy阶段去掉。
• 原理是利用ES6模块的特点，只能作为模块顶层语句出现，import的模块名只能是字符串常量。
• webpack默认支持，在.babelrc里设置module:false即可在production mode下默认开启

1. Scope Hoisting：

• 可以让webpack打包出来的文件体积更小，运行的更快，它又译为作用域提升，是在webpack3中推出的功能。
• 原理是将所有的模块按照引用顺序放在一个函数作用域里，然后适当地重命名一些变量防止命名冲突，
• 这个功能在node为production下默认开启，开发环境要用webpack.optimize.ModuleConcatenationPlugin

1. 代码分割：

• 对于大的web应用来讲，将所有的代码都放在一个文件中显然是不够有效的，特别是当你的某些代码块是在某些特殊的时候才会被用到。
• webpack有一个功能就是将你的代码库分割成chunks语块，当代码运行到需要他们的时候再进行加载

1. 入口点分割：
2. Entry Poins：入口文件设置的时候可以配置
3. 问题：

• 如果入口chunks之间包含重复的模块（lodash），那些重复的模块都会被引入各自的bundle中。
• 不够灵活，并且不能将核心应用程序逻辑进行动态拆分代码

1. 动态倒入和懒加载
2. 用户当前需要什么功能就只加载这个功能对应的代码，也就是所谓的按需加载
3. 在给单页应用做按需加载优化时，一般采用以下原则

• 对网站功能进行划分，每一个类一个chunk
• 对于首次打开页面需要的功能直接加载，尽快展示给用户，某些依赖大量代码的功能点可以按需加载
• 被分割出去的代码需要一个按需加载的时机

1. preload（预先加载）
2. proload通常用于本页面要用到的关键资源，包括js，字体，css文件
3. proload将会把资源的下载顺序权重提高，把关键数据提前下载好，优化页面打开速度
4. 在资源上添加预先加载的注释，你指明该模块需要立即被使用
5. 一个资源的加载优先级分为5个级别

• Highest 最高
• High 高
• Medium 中等
• Low 低
• Lowest 最低

1. 异步、延迟、插入的脚本（无论在什么位子），在网络优先级中是Low
2. prefetch（预先拉取）
3. prefetch和preload不同，它的作用是告诉浏览器未来可能会使用到某个资源，浏览器就会在闲时去加载对应的资源，若能预测到用户的行为，比如懒加载，点击到其它页面等则相当于提前预加载了需要的资源
4. 提取公共代码：
5. 为什么提取公共代码

• 大网站有多个页面，每个页面由于采用相同技术栈和样式代码，会包含很多公共代码
• 相同的资源被重复加载，浪费用户的流量和服务器成本
• 每个页面需要加载的资源太大，导致网页首屏加载缓慢，影响用户体验
• 如果能把公共代码抽离成单独文件进行加载能进行优化，可以减少网络传输流量

1. splitChunks.  自动分割第三方模块和公共模块
2. CDN
3. 最影响用户体验的是网页首次打开时的加载等待，导致这个问题的根本是网络传输过程耗时大，CDN的作用就是加速网络传输
4. CDN又叫内容分发网络，通过把资源部署到世界各地，用户在访问时按照就近原则从离用户最近的服务器获取资源，从而加速资源的获取速度
5. 用户使用浏览器第一次访问我们的站点时，该页面引入各种静态资源，如果我们能做到持久化缓存的话，可以在http相应头上加Cache-control或Expires字断来设置缓存，浏览器可以将这些资源缓存到本地。
6. 用户在后续访问的时候，如果需要再次请求同样的静态资源，且静态资源没有过期，那么浏览器可以直接走本地缓存不用通过网络请求资源

总结给大家推荐一个实用面试题库

**1、前端后端面试题库 （**面试必备） 推荐：★★★★★

地址：前端面试题库

2、前端技术导航大全      推荐：★★★★★

地址：前端技术导航大全

3、开发者颜色值转换工具   推荐：★★★★★

地址 ：开发者颜色值转换工具

总结

我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-KlVH9i7A-1714508254010)]