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

本文介绍了Webpack中不同sourcemap类型的选择,推荐开发环境使用cheap-module-eval-source-map,生产环境使用cheap-module-source-map。同时讨论了前端性能优化技术,如压缩、TreeShaking、ScopeHoisting和代码分割等。
摘要由CSDN通过智能技术生成
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次,每次也不知道具体是什么原因,都是靠面试回忆去猜测可能是哪方面的问题,回来学习和完善,当你真正去招人的时候,你就会知道面试记录是多么重要,面试官可以从面试记录里看到你的成长,总是去面试,总是没有成长,就会被定义为缺乏潜力。

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

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

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

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

  • 15
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值