本篇文章给大家分享10个关于webpack的面试题,查漏补缺,看看这十个面试题你能答对几个?是否可以全部答对?
面试题只是一个引子,快速刷题就是背
(面试官问你,但是他不一定很深入),想深入理解还是得花大量精力
;
初始化参数
:解析webpack配置参数,合并shell传入和webpack.config.js文件配置的参数,形成最后的配置结果;
开始编译
:上一步得到的参数初始化compiler对象,注册所有配置的插件,插件 监听webpack构建生命周期的事件节点,做出相应的反应,执行对象的run方法开始执行编译;
确定入口
:从配置的entry入口,开始解析文件构建AST语法树,找出依赖,递归下去;
编译模块
:递归中根据文件类型和loader配置,调用所有配置的loader对文件进行转换,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理;
完成模块编译并输出
:递归完事后,得到每个文件结果,包含每个模块以及他们之间的依赖关系,根据entry或分包配置生成代码块chunk;
输出完成
:输出所有的chunk到文件系统;
其实是自己开启了express应用
,添加了对webpack编译的监听,添加了和浏览器的websocket长连接,当文件变化触发webpack进行编译并完成后,会通过sokcet消息告诉浏览器准备刷新
。而为了减少刷新的代价,就是不用刷新网页
,而是刷新某个模块
,webpack-dev-server可以支持热更新,通过生成 文件的hash值来比对需要更新的模块,浏览器再进行热替换
服务端
客户端
1、webpack生态中存在多种计算hash的方式
hash
chunkhash
contenthash
hash代表每次webpack编译中生成的hash值,所有使用这种方式的文件hash都相同。每次构建都会使webpack计算新的hash。chunkhash基于入口文件及其关联的chunk形成,某个文件的改动只会影响与它有关联的chunk的hash值,不会影响其他文件contenthash根据文件内容创建。当文件内容发生变化时,contenthash发生变化
2、避免相同随机值
计算hash后分割chunk
。产生相同随机值可能是因为这些文件属于同一个chunk,可以将某个文件提到独立的chunk(如放入entry)
<% HtmlWebpackPlugin.options.loading.html %>
,在 html-webpack-plugin 中即可通过配置html属性,将script注入进去ProvidePlugin
:自动加载模块,代替require和importhtml-webpack-plugin
可以根据模板自动生成html代码,并自动引用css和js文件extract-text-webpack-plugin
将js文件中引用的样式单独抽离成css文件DefinePlugin
编译时配置全局变量,这对开发模式和发布模式的构建允许不同的行为非常有用。HotModuleReplacementPlugin
热更新optimize-css-assets-webpack-plugin
不同组件中重复的css可以快速去重webpack-bundle-analyzer
一个webpack的bundle文件分析工具,将bundle文件以可交互缩放的treemap的形式展示。compression-webpack-plugin
生产环境可采用gzip压缩JS和CSShappypack
:通过多进程模型,来加速代码构建clean-wenpack-plugin
清理每次打包下没有使用的文件speed-measure-webpack-plugin
:可以看至U每个Loader和Plugin执行耗时(整个扌丁包耗时、每个Plugin和 Loader 耗时)webpack-bundle-analyzer
:可视化Webpack输出文件的体积(业务组件、依赖第三方模块function MyWebpackPlugin()( }; // prototype 上定义 apply 方法 MyWebpackPlugin.prototype.apply=function(){ // 指定一个事件函数挂载到webpack compiler.pluginCwebpacksEventHook"funcion (compiler)( console. log(“这是一个插件”); // 功能完成调用后webpack提供的回调函数 callback() })
file-loader
:把文件输出到⼀个文件夹中,在代码中通过相对 URL 去引⽤输出的⽂件url-loader
:和 file-loader 类似,但是能在⽂件很⼩的情况下以 base64 的⽅式把⽂件内容注⼊到代码中去source-map-loader
:加载额外的 Source Map ⽂件,以⽅便断点调试image-loader
:加载并且压缩图⽚⽂件babel-loader
:把 ES6 转换成 ES5css-loader
:加载 CSS,⽀持模块化、压缩、⽂件导⼊等特性style-loader
:把 CSS 代码注⼊到 JavaScript 中,通过 DOM 操作去加载 CSS。eslint-loader
:通过 ESLint 检查 JavaScript 代码服务端设置http缓存头
(cache-control)即作为splitChunk,因为他们几乎是不变的
延迟加载
:使用import()方式
,可以动态加载的文件分到独立的chunk,以得到自己的chunkhash保持hash值的稳定
:编译过程和文件内通的更改尽量不影响其他文件hash的计算,对于低版本webpack生成的增量数字id不稳定问题,可用hashedModuleIdsPlugin基于文件路径生成解决⽤webpack优化前端性能是指优化webpack的输出结果,让打包的最终结果在浏览器运⾏快速⾼效。
压缩代码
:删除多余的代码、注释、简化代码的写法等等⽅式。可以利⽤webpack的 UglifyJsPlugin 和 ParallelUglifyPlugin 来压缩JS件, 利⽤ cssnano (css-loader?minimize)来压缩css利⽤CDN加速
: 在构建过程中,将引⽤的静态资源路径修改为CDN上对应的路径。可以利⽤webpack对于 output 参数和各loader的 publicPath 参数来修改资源路径Tree Shaking
: 将代码中永远不会⾛到的⽚段删除掉。可以通过在启动webpack时追加参数 --optimize-minimize 来实现Code Splitting
: 将代码按路由维度或者组件分块(chunk),这样做到按需加载,同时可以充分利⽤浏览器缓存提取公共第三⽅库
: SplitChunksPlugin插件来进⾏公共模块抽取,利⽤浏览器缓存可以⻓期缓存这些⽆需频繁变动的公共代码摇树优化
,是一种通过移除多于代码,来优化打包体积的,生产环境默认开启
。代码不运行
的状态下,分析出不需要的代码
;es6模块
的规范静态分析
,故而编译的时候正确判断到底加载了那些模块
原文地址:https://juejin.cn/post/7002839760792190989
作者:前端_小牛_到犀牛
相关教程推荐:《Webpack入门视频教程》
以上是10个webpack的面试题,你能接住几题?的详细内容。更多信息请关注PHP中文网其他相关文章!