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

5. url-loader：和fileload类似，但是小文件可以以base64的形式输出
6. sass-loader：把sass编译成CSS
7. postcss-loader：使用postcss来处理CSS
8. css-loader：主要来处理background还有@import这些语法，让webpack能够正确对其路径进行处理
9. style-loader：把CSS代码注入到JS中，通过DOM操作来加载CSS

Plugin：

1. DefinePlugin：创建一个编译时可配置的全局常量
2. HotMoDuleReplacementPlugin：启动模块热替换
3. html-webpack-plugin：自动生成带有入口文件引用的index.html
4. optimize-css-assets-webpack-plugin：用于优化或者压缩css资源
5. ModuleNotFoundPlugin：找不到模块的时候提供一下更详细的上下文信息
6. webpack-manifest-plugin：生产资产的显示清单文件
7. ModuleScopePlugin：引用了src目录外的文件报警插件

5、source map是什么？上下文环境怎么用？

• source map是为了解决开发代码与实际运行代码不一致是帮助我们debug到原始开发代码的技术
• webpack通过配置可以自动生成source map文件，map文件是一种对应编译文件和源文件的方法

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.ModuleConcatenatio

真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲
详情关注公中号【编程进阶路】

nPlugin

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. 用户在后续访问的时候，如果需要再次请求同样的静态资源，且静态资源没有过期，那么浏览器可以直接走本地缓存不用通过网络请求资源

前端面试题汇总

JavaScript

性能

linux

前端资料汇总