webpack的面试题
1、webpack打包原理
把所有依赖打包成一个 bundle.js 文件,通过代码分割成单元片段并按需加载。
2、webpack的优势
(1) webpack 是以 commonJS 的形式来书写脚本滴,但对 AMD/CMD 的支持也很全面,方便旧项目进行代码迁移。
(2)能被模块化的不仅仅是 JS 了。
(3) 开发便捷,能替代部分 grunt/gulp 的工作,比如打包、压缩混淆、图片转base64等。
(4)扩展性强,插件机制完善
3、什么是loader,什么是plugin
loader用于加载某些资源文件。因为webpack本身只能打包common.js规范的js文件,对于其他资源如css,img等,是没有办法加载的,这时就需要对应的loader将资源转化,从而进行加载。
plugin用于扩展webpack的功能。不同于loader,plugin的功能更加丰富,比如压缩打包,优化,不只局限于资源的加载。
4、什么是bundle,什么是chunk,什么是module
bundle:是由webpack打包出来的文件
chunk:是指webpack在进行模块依赖分析的时候,代码分割出来的代码块
module:是开发中的单个模块
5、webpack 和 gulp 的区别?
webpack:
webpack是一个模块打包器,强调的是一个前端模块化方案,更侧重模块打包,我们可以把开发中的所有资源都看成是模块,通过loader和plugin对资源进行处理。
gulp:
gulp是一个前端自动化构建工具,强调的是前端开发的工作流程,可以通过配置一系列的task,第一task处理的事情(如代码压缩,合并,编译以及浏览器实时更新等)。然后定义这些执行顺序,来让glup执行这些task,从而构建项目的整个开发流程。自动化构建工具并不能把所有的模块打包到一起,也不能构建不同模块之间的依赖关系。
6、什么是模热更新?有什么优点?
模块热更新是webpack的一个功能,它可以使得代码修改之后,不用刷新浏览器就可以更新。在应用过程中替换添加删出模块,无需重新加载整个页面,是高级版的自动刷新浏览器。
优点:
只更新变更内容,以节省宝贵的开发时间。调整样式更加快速,几乎相当于在浏览器中更改样式
7、webpack-dev-server 和 http服务器的区别
webpack-dev-server使用内存来存储webpack开发环境下的打包文件,并且可以使用模块热更新,比传统的http服务对开发更加有效。
8、什么是长缓存?在webpack中如何做到长缓存优化?
浏览器在用户访问页面的时候,为了加快加载速度,会对用户访问的静态资源进行存储,但是每一次代码升级或者更新,都需要浏览器去下载新的代码,最方便和最简单的更新方式就是引入新的文件名称。
在webpack中,可以在output给出输出的文件制定chunkhash,并且分离经常更新的代码和框架代码,通过NameModulesPlugin或者HashedModulesPlugin使再次打包文件名不变。
9、什么是Tree-sharking?CSS可以Tree-shaking吗?
Tree-shaking是指在打包中去除那些引入了,但是在代码中没有被用到的那些死代码。在webpack中Tree-shaking是通过uglifySPlugin来Tree-shakingJS。Css需要使用Purify-CSS。
10、如何可以自动生成webpack配置?
webpack-cli /vue-cli /etc …脚手架工具
11、webpack打包
在生产环境中,webpack执行的时候build.js文件太大,每次请求都会消耗很大的流量,如果修改代码,代码不会更新,浏览器记录了缓存,如果同名文件不会发起请求,走缓存;
使用readfileSync读取package.json文件中的版本号,把获取的version(版本号)加入到output出口文件build.js中,以版本号管理升级的问题,版本一升级所有的资源,都直接重新来,浪费很多不必要的流量,如果文件发生改变那么从新请求index.html内的引用也要发生改变;
以chunkhash来解决缓存后修改代码的问题,在每个文件的处理中都可以获取其数字签名,文件内容发生改变,chunkhash也发生改变,index,html中的chunkhash文件名也发生改名,产生系统升级,不走缓存;
如果更改css或者js或者第三方包,都会触发重新牺牲流量去请求新的build.js,使用webpack的插件extract-text-webpack-plugin,在插件中通过contenthash将css分离,css的更改和js的更改互不影响,只要发生改动就能绕过缓存完成升级;
如果修改js,会影响所有的js(里面的内容包括自己写的和第三方包),使用webpack插件CommonsChunkPlugin分离第三方库,把自己的js和第三方包分离,各走各的,第三方包走vendor;
改动main.js代码会导致重新生成vendor,使用manifest记录到依赖清单,每次只要改动vorder或者main都会重新生成关联清单,vendor不会被main.js所影响,main.js也不会被vendor所影响;
假如不走缓存的话,那么vendor和main的文件还是特别大,使用webpack插件uglifyjs-webpack-plugin,来压缩js,因为用了ES6,所以使用yarn下载,压缩之后js文件就小了差不多50%;
当前效果比之前好了很多,但是还不是最完美的,在没有任何缓存的情况下,用户一进来主页访问消耗的流量还是很大,此时就需要用到按需加载组件,webpack分块打包,在路由router中提供了一个功能,懒加载,不要需要改变任何路由配置,把所有独自默认一开始就加载的组件分块打包(除了全局下的),形成一个个封装的函数,在路由匹配需要渲染的时候才获取组件对象,在页面创建script标签请求回来,引入执行…
webpack的面试题相关推荐
- webpack的面试题总结
为什么要总结webpack相关的面试题 随着现代前端开发的复杂度和规模越来越庞大,已经不能抛开工程化来独立开发了,如react的jsx代码必须编译后才能在浏览器中使用:又如sass和less的代码浏览 ...
- webpack的面试题(吐血整理)
以下为整理的webpack面试题,如有不足之处,还请大家多多指正. 一.webpack的构建流程 二.对webpack的理解 webpack是一个打包模块化js的工具,在webpack里一切文件皆模块 ...
- webpack常见面试题
webpack npm run build / serve 之后发生了什么? 答:脚手架使用webpack来执行配置文件,默认是webpack.config.js或者vue.config.js.然后执 ...
- Vue+网络协议+Webpack高频面试题
文章目录 Vue vue的优点是什么? vue生命周期(重要) created和mounted的区别(重点) 什么是 MVVM? 双向数据绑定原理(重点) vue自定义指令 vue自定义组件 Vue组 ...
- webpack 常见面试题
1. webpack与grunt.gulp的不同? webpack 已是前端打包构建的不二选择 三者都是前端构建工具,grunt和gulp在早期比较流行,现在webpack相对来说比较主流,不过一些轻 ...
- 2020webpack的面试题(webpack)
关于webpack的面试题总结 为什么要总结webpack相关的面试题 随着现代前端开发的复杂度和规模越来越庞大,已经不能抛开工程化来独立开发了,如react的jsx代码必须编译后才能在浏览器中使用: ...
- 2021 最新 webpack 面试题
webpack打包原理 将所有依赖打包成一个bundle.js,通过代码分割成单元片段按需加载 什么是webpack,与gulp,grunt有什么区别 webpack是一个模块打包工具,可以递归地打包 ...
- webpack面试题整理
gulp/grunt 与 webpack的区别是什么? 三者都是前端构建工具,grunt和gulp在早期比较流行,现在webpack相对来说比较主流,不过一些轻量化的任务还是会用gulp来处理,比如单 ...
- Webpack面试题超全面【吐血整理】
0.有哪些常见的Loader?你用过哪些Loader? (我开始熟悉的报起了菜名) raw-loader:加载文件原始内容(utf-8) file-loader:把文件输出到一个文件夹中,在代码中通过 ...
最新文章
- C++中的重载、覆盖、隐藏对比
- java多线程抽奖_java 线程池、多线程并发实战(生产者消费者模型 1 vs 10) 附案例源码...
- 最新县及县以上行政区划代码(截止2009年12月31日)
- 零基础学python可以吗-零基础学习Python可以学会吗?你有哪些方法?
- 我也聊聊串口通信协议:数据包校验与常用校验算法
- 嵌入式设计与开发实践要点[1.2]-嵌入式系统的内核
- thymeleaf th:if else
- Oracle 10G select工作原理
- AIX系统root用户密码忘记
- 《IT项目管理那些事儿》——新浪微博抽奖活动
- 关于windows server与SQL server用户数的解释 (转)
- COMMUNITY DETECTION
- 1.100个房产测量常见问题 2. 现有的商用房产测绘软件 3.问题_拔剑-浆糊的传说_新浪博客...
- POSTING_INTERFACE_DOCUMENT解决特别总账'W'类型的过账问题
- 感知机不能表示“异或”
- My 2007 Fash game: Elite Shooter
- Wireshark分析流量包案例
- 英文学习20180621
- 衣新履靓,智能商业空间的鞋服行业应用
- 切断电源之后计算机丢失的,电脑断电重启找不到硬盘该咋办?
热门文章
- 终于来了!Pyston v2.0 发布,速度比 Python 快 20%!
- 方法不对,啥都学不会!90%的Python工程师都输在这点上!
- 图解一致性哈希算法,看这文就够了!
- 一文带你弄懂 Java 动态代理 | 原力计划
- 干货满满!全面详解如何用递归解题!
- 人人在谈的物联网,入门开发真难!
- GitHub:围剿Python计划!程序员:早知必有一战!你站谁?
- 程序员的代码为什么永远写不完?
- 刘强东深夜写信诉苦;华为不排斥卖给苹果 5G 芯片;Facebook 再宕机 | 极客头条...
- 马云放弃阿里巴巴所有权?华硕裁员上百人;扎克伯格账号被黑 | 极客头条