webpack面试题整理
gulp/grunt 与 webpack的区别是什么?
三者都是前端构建工具,grunt和gulp在早期比较流行,现在webpack相对来说比较主流,不过一些轻量化的任务还是会用gulp来处理,比如单独打包CSS文件等。
grunt和gulp是基于任务和流(Task、Stream)的。类似jQuery,找到一个(或一类)文件,对其做一系列链式操作,更新流上的数据, 整条链式操作构成了一个任务,多个任务就构成了整个web的构建流程。
webpack是基于入口的。webpack会自动地递归解析入口所需要加载的所有资源文件,然后用不同的Loader来处理不同的文件,用Plugin来扩展webpack功能。
参考资料:关于webpack的面试题总结 - 腾讯云开发者社区-腾讯云
webpack是解决什么问题而生的?
如果像以前开发时一个html文件可能会引用十几个js文件,而且顺序还不能乱,因为它们存在依赖关系,同时对于ES6+等新的语法,less, sass等CSS预处理都不能很好的解决……,此时就需要一个处理这些问题的工具。
Webpack就是为处理这些问题而生的。
参考资料:webpack4.x最详细入门指南_先生姓陈的技术博客_51CTO博客
webpack如何配置多入口文件?
entry: {
home: resolve(__dirname, "src/home/index.js"),
about: resolve(__dirname, "src/about/index.js")
}注意想想要不要多个出口
参考资料:入口起点(entry points) | webpack 中文文档
你是如何提高webpack构件速度的?
多入口情况下,使用CommonsChunkPlugin来提取公共代码
通过externals配置来提取常用库
利用DllPlugin和DllReferencePlugin预编译资源模块通过DllPlugin来对那些我们引用但是绝对不会修改的npm包来进行预编译,再通过DllReferencePlugin将预编译的模块加载进来。
使用Happypack 实现多线程加速编译
使用webpack-uglify-paralle来提升uglifyPlugin的压缩速度。 原理上webpack-uglify-parallel采用了多核并行压缩来提升压缩速度
使用Tree-shaking和Scope Hoisting来剔除多余代码参考资料:抱歉,站点已注销
利用webpack如何优化前端性能?
同上条,另外加:
给打包出来的文件名添加哈希,实现浏览器缓存文件
webpack的构建流程是什么?从读取配置到输出文件这个过程尽量说全.
Webpack 的运行流程是一个串行的过程,从启动到结束会依次执行以下流程:
- 初始化参数:从配置文件和 Shell 语句中读取与合并参数,得出最终的参数;
- 开始编译:用上一步得到的参数初始化 Compiler 对象,加载所有配置的插件,执行对象的 run 方法开始执行编译;
- 确定入口:根据配置中的 entry 找出所有的入口文件;
- 编译模块:从入口文件出发,调用所有配置的 Loader 对模块进行翻译,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理;
- 完成模块编译:在经过第4步使用 Loader 翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系;
- 输出资源:根据入口和模块之间的依赖关系,组装成一个个包含多个模块的 Chunk,再把每个 Chunk 转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会;
- 输出完成:在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统。
在以上过程中,Webpack 会在特定的时间点广播出特定的事件,插件在监听到感兴趣的事件后会执行特定的逻辑,并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。
参考资料:关于webpack的面试题总结 - 腾讯云开发者社区-腾讯云
简述如何写一个loader/plugin
Loader像一个"翻译官"把读到的源文件内容转义成新的文件内容,并且每个Loader通过链式操作,将源文件一步步翻译成想要的样子。
编写Loader时要遵循单一原则,每个Loader只做一种"转义"工作。 每个Loader的拿到的是源文件内容(source),可以通过返回值的方式将处理后的内容输出,
也可以调用this.callback()方法,将内容返回给webpack。 还可以通过 this.async()生成一个callback函数,再用这个callback将处理后的内容输出出去。 此外webpack还为开发者准备了开发loader的工具函数集——loader-utils。
相对于Loader而言,Plugin的编写就灵活了许多。 webpack在运行的生命周期中会广播出许多事件,Plugin 可以监听这些事件,在合适的时机通过 Webpack 提供的 API 改变输出结果。
参考资料:关于webpack的面试题总结 - 腾讯云开发者社区-腾讯云
如何提高构建/编译速度,并解答每个方案的原理
wepback的可视化资源分析工具:webpack-bundle-analyzer
慢在何处:
从项目结构着手,代码组织是否合理,依赖使用是否合理;
从webpack自身提供的优化手段着手,看看哪些api未做优化配置;
从webpack自身的不足着手,做有针对性的扩展优化,进一步提升效率;方案一、合理配置 CommonsChunkPlugin
原理是当有多个entry入口时,把它们可能共有的公共模块提取出来方案二、通过 externals 配置来提取常用库
简单来说external就是把我们的依赖资源声明为一个外部依赖,
然后通过script外链脚本引入。这也是我们早期页面开发中资源引入的一种翻版,
只是通过配置后可以告知webapck遇到此类变量名时就可以不用解析和编译至模块的内部文件中,
而改用从外部变量中读取,这样能极大的提升编译速度,同时也能更好的利用CDN来实现缓存。方案三、利用 DllPlugin 和 DllReferencePlugin 预编译资源模块
简单来说DllPlugin的作用是预先编译一些模块,
而DllReferencePlugin则是把这些预先编译好的模块引用起来。方案四、使用 Happypack 加速你的代码构建
happypack的处理思路是
将原有的webpack对loader的执行过程从单一进程的形式扩展多进程模式,
原本的流程保持不变,这样可以在不修改原有配置的基础上来完成对编译过程的优化。方案五、增强 uglifyPlugin
使用webpack-uglify-parallel来提升压缩速度。
webpack-uglify-parallel的是实现原理是采用了多核并行压缩的方式来提升我们的压缩速度。方案六、Tree-shaking & Scope Hoisting
利用es6的module特性,
利用AST对所有引用的模块和方法做了静态分析,
从而能有效地剔除项目中的没有引用到的方法,
并将相关方法调用归纳到了独立的webpack_module中参考资料:webpack三两事:浅入深出-原理解析构建优化_mb600becf249518的技术博客_51CTO博客
资源体积减小方案
Webpack如何打包才能尽可能的缩小体积(详解)_拼搏的小叔的博客-CSDN博客_webpack 减小包体积
构建速度加快方案
webpack之优化篇(二):优化配置提高构建速度_i大俊的博客-CSDN博客
3. babel 相关: polyfill 以及 runtime 区别, ES stage 含义,preset–env 作用等等
1.polyfill 以及 runtime 区别
babel-polyfill 的原理是当运行环境中并没有实现的一些方法,babel-polyfill会做兼容。
babel-runtime 它是将es6编译成es5去执行。我们使用es6的语法来编写,最终会通过babel-runtime编译成es5.也就是说,不管浏览器是否支持ES6,只要是ES6的语法,它都会进行转码成ES5.所以就有很多冗余的代码。
babel-polyfill 它是通过向全局对象和内置对象的prototype上添加方法来实现的。比如运行环境中不支持Array.prototype.find 方法,引入polyfill, 我们就可以使用es6方法来编写了,但是缺点就是会造成全局空间污染。
babel-runtime: 它不会污染全局对象和内置对象的原型,比如说我们需要Promise,我们只需要import Promise from 'babel-runtime/core-js/promise'即可,这样不仅避免污染全局对象,而且可以减少不必要的代码。2.
stage-x:指处于某一阶段的js语言提案Stage 0 - 设想(Strawman):只是一个想法,可能有 Babel插件。
Stage 1 - 建议(Proposal):这是值得跟进的。
Stage 2 - 草案(Draft):初始规范。
Stage 3 - 候选(Candidate):完成规范并在浏览器上初步实现。
Stage 4 - 完成(Finished):将添加到下一个年度版本发布中。3. 理解 babel-preset-env
比如:
babel-preset-es2015: 可以将es6的代码编译成es5.
babel-preset-es2016: 可以将es7的代码编译为es6.
babel-preset-es2017: 可以将es8的代码编译为es7.
babel-preset-latest: 支持现有所有ECMAScript版本的新特性参考资料
https://www.iteye.com/blog/wx1568487608-2457500
Babel配置中的presets、plugins、各个阶段stage的含义
webpack面试题整理相关推荐
- webpack 面试题整理
文章目录 webpack 面试题整理 谈谈你对Webpack的理解 Webpack的打包过程/打包原理/构建流程? Webpack中loader的作用/ loader是什么? 常见的loader有哪些 ...
- Webpack面试题超全面【吐血整理】
0.有哪些常见的Loader?你用过哪些Loader? (我开始熟悉的报起了菜名) raw-loader:加载文件原始内容(utf-8) file-loader:把文件输出到一个文件夹中,在代码中通过 ...
- 2022年前端面试题整理,持续更新中
端面试题整理 已同步到掘金.CSDN 掘金地址: https://juejin.cn/post/7075332630417244173 CSDN 地址:https://blog.csdn.net/z1 ...
- 前端面试题整理汇总(一)
前端面试题整理汇总(一) 优才网 关于前端面试题,优优之前推荐过,如下,点击即可查看: 5个经典的前端面试问题 2016年十家知名公司前端面试经验总结 前端面试会问哪些问题? 前端开发面试题汇总[HT ...
- Webpack面试题
面试题希沃ENOW大前端 公司官网:CVTE(广州视源股份) 团队:CVTE旗下未来教育希沃软件平台中心enow团队 本文作者: 温广名片2.png 前言 在前端工程化日趋复杂的今天,模块打包工具在我 ...
- 前端面试题整理2020
前端面试题整理2020 1.一些开放性题目 1.自我介绍:除了基本个人信息以外,面试官更想听的是你与众不同的地方和你的优势. 2.项目介绍 3.如何看待前端开发? 4.平时是如何学习前端开发的? 5. ...
- 长期维护更新,前端面试题整理
网上找到的各种面试题整理,长期更新.大部分答案整理来自网络,有问题的地方,希望大家能指出,及时修改;技术更新迭代,也会及时更新 博客原地址: https://finget.github.io/2019 ...
- 前端面试题整理总结--2021
双向绑定的原理: 把 Dep / Observer/ Watcher几个类的关系, 如何做到双向绑定.依赖的更新怎么处理 vue的双向绑定原理及实现 - 最骚的就是你 - 博客园 Vue.js双向绑定 ...
- 前端面试题整理-ing---kalrry
前端面试题整理-ing---kalrry 前言 一.Html/Css面试题 1. img中的alt和title的区别 2. rem/em/vw的区别 3. BFC 是什么 4. @media all ...
最新文章
- RabbitMQ的应用场景以及基本原理介绍
- 【BZOJ】3390: [Usaco2004 Dec]Bad Cowtractors牛的报复(kruskal)
- 蓝桥杯 算法提高 递推求值(矩阵快速幂)详解
- 在C#程序设计中使用Win32 API
- 文献记录(part2)--A Dykstra-like algorithm for two monotone operators
- 如何给SAP Cloud Platform的CloudFoundry环境里的subaccount添加quota
- php mysql存中文,PHP+MySQL存储数据常见中文乱码问题小结
- UE3 性能调试:动态光照环境
- Beta冲刺 day7
- 微软宣布免费 Web 版 Office 2010发布日期
- JVM性能调优监控工具专题一:JVM自带性能调优工具(jps,jstack,jmap,jhat,jstat,hprof)...
- 2017-02-26,周日整理
- mariadb配置允许远程访问方式
- 手机游戏源码下载的网站
- 2015-2018节假日表
- 【Win7开启DMA】
- python高级练习题:法贝热复活节彩蛋压测试【难度:5级】--景越Python编程实例训练营,不同难度Python习题,适合自学Python的新手进阶
- Proximal Policy Optimization近端策略优化(PPO)
- CSS第四篇(复合选择器)
- 创造者的品味 转自apple4.us
热门文章
- 计算机作业评价表,信息技术课课堂教学评价表
- Could not connect to Redis at ip:6379
- SwitchyOmega 配置前端代理
- 高数培训3:多元函数微分
- java list_java中list的简介
- 肾缺血再灌注动物模型 大小鼠肾缺血再灌注IR模型
- 配置Memcached禁止公网访问
- java包装和引用_回顾值传递和引用传递关于Java是值传递还是引用传递,网上有不一样的说法。1、基本类型或基本类型的包装类以及String是值传递,引用类型是引用传递。2...
- [UE4]后处理模糊,几种方法
- 【算法】Candy 分发糖果