前端面试题《webpack&打包构建&项目优化》

矫情吗；* 2023-01-13 09:50 87阅读 0赞

### webpack插件的基本组成  ###

*  一个具名 JavaScript 函数；
 *  在它的原型上定义 apply 方法；
 *  指定一个触及到 Webpack 本身的事件钩子；
 *  操作 Webpack 内部的实例特定数据；
 *  在实现功能后调用 Webpack 提供的 callback。

一个基本插件

class HelloWorldPlugin {
      apply(compiler) {
        compiler.hooks.done.tap('Hello World Plugin', (
          stats /* 在 hook 被触及时，会将 stats 作为参数传入。*/
        ) => {
          console.log('Hello World!');
        });
      }
    }
    module.exports = HelloWorldPlugin;

### webpack与 vite 的不同， vite的速度提升在哪里 ###

>  *  webpack会先打包，然后启动开发服务器，请求服务器时直接给予打包结果。
>  *  而vite是直接启动开发服务器，请求哪个模块再对该模块进行实时编译。
>  *  由于现代浏览器本身就支持ES Module，会自动向依赖的Module发出请求。vite充分利用这一点，将开发环境下的模块文件，就作为浏览器要执行的文件，而不是像webpack那样进行打包合并。
>  *  由于vite在启动的时候不需要打包，也就意味着不需要分析模块的依赖、不需要编译，因此启动速度非常快。当浏览器请求某个模块时，再根据需要对模块内容进行编译。这种按需动态编译的方式，极大的缩减了编译时间，项目越复杂、模块越多，vite的优势越明显。
>  *  在HMR（热更新）方面，当改动了一个模块后，仅需让浏览器重新请求该模块即可，不像webpack那样需要把该模块的相关依赖模块全部编译一次，效率更高。
>  *  当需要打包到生产环境时，vite使用传统的rollup（也可以自己手动安装webpack来）进行打包，因此，vite的主要优势在开发阶段。另外，由于vite利用的是ES Module，因此在代码中（除了vite.config.js里面，这里是node的执行环境）不可以使用CommonJS

### **rollup和webpack的区别？** ###

> 简单的来说**rollup是一个Js模块打包器**，可以将小块代码编译成大块复杂的代码。现在已经有很多类库都在使用 [rollup][] 进行打包了，比如：[react][], [vue][], [preact][], [three.js][],[moment][], [d3][] 等。  
> *优点：小巧而专注*

特性:
           rollup 所有资源放同一个地方，一次性加载,利用 tree-shake特性来  剔除未使用的代码，减少冗余
           webpack 拆分代码、按需加载  webpack2已经逐渐支持tree-shake
       rollup:
         1.打包你的 js 文件的时候如果发现你的无用变量，会将其删掉。
         2.可以将你的 js 中的代码，编译成你想要的格式
       webpack:
        1.代码拆分
        2.静态资源导入（如 js、css、图片、字体等）
        拥有如此强大的功能，所以 webpack 在进行资源打包的时候，就会产生很多冗余的代码。

> 项目（特别是类库）只有 js，而没有其他的静态资源文件，使用 webpack 就有点大才小用了，因为 webpack bundle 文件的体积略大，运行略慢，可读性略低。这时候 [rollup][]就是一种不错的解决方案  
> **结论：对于应用使用 webpack，对于类库使用 Rollup**

### webpack如何解析less?(less-loader、css-loader、style-loade) ###

> 主要通过less-loader、css-loader、style-loader插件作用
> 
> less-loader：用于加载.less文件，将less转化为css
> 
> css-loader：用于加载.css文件，将css转化为commonjs
> 
> style-loader: 将样式通过<style>标签插入到head中
> 
> **顺序是less-loader > css-loader > style-loader**

###  如何利用webpack来优化前端性能？ ###

>  *  **压缩代码**。删除多余的代码、注释、简化代码的写法等等方式。可以利用webpack的`UglifyJsPlugin`和`ParallelUglifyPlugin`来压缩JS文件， 利用`cssnano`（css-loader?minimize）来压缩css
>  *  **利用CDN加速**。在构建过程中，将引用的静态资源路径修改为CDN上对应的路径。可以利用webpack对于`output`参数和各loader的`publicPath`参数来修改资源路径
>  *  **删除死代码**（Tree Shaking）。将代码中永远不会走到的片段删除掉。可以通过在启动webpack时追加参数`--optimize-minimize`来实现
>  *  **提取公共代码**

### 如何提高webpack的构建速度？ ###

>  *  多入口情况下，使用`CommonsChunkPlugin`来提取公共代码
>  *  通过`externals`配置来提取常用库
>  *  利用`DllPlugin`和`DllReferencePlugin`预编译资源模块 通过`DllPlugin`来对那些我们引用但是绝对不会修改的npm包来进行预编译，再通过`DllReferencePlugin`将预编译的模块加载进来。
>  *  使用`Happypack` 实现多线程加速编译，它把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程。（由于 js是单线程模型，要想发挥多核 CPU 的能力，只能通过多进程去实现，而无法通过多线程实现。）
>  *  使用`webpack-uglify-parallel`来提升`uglifyPlugin`的压缩速度。 原理上`webpack-uglify-parallel`采用了多核并行压缩来提升压缩速度
>  *  使用`Tree-shaking`和`Scope Hoisting`来剔除多余代码

### 有哪些常见的Loader？他们是解决什么问题的？ ###

>  *  file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件
>  *  url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去
>  *  source-map-loader：加载额外的 Source Map 文件，以方便断点调试
>  *  image-loader：加载并且压缩图片文件
>  *  babel-loader：把 ES6 转换成 ES5
>  *  css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
>  *  style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。
>  *  eslint-loader：通过 ESLint 检查 JavaScript 代码

### 有哪些常见的Plugin？他们是解决什么问题的？ ###

>  *  define-plugin：定义环境变量
>  *  commons-chunk-plugin：提取公共代码
>  *  uglifyjs-webpack-plugin：通过`UglifyES`压缩`ES6`代码

### webpack开启热更新及原理（**使得应用在运行状态下，不重载刷新就能更新、增加、移除模块的机制**） ###

>  *  使用 `HotModuleReplacementPlugin` 插件
> 
>     // webpack.config.js
>     module.exports = {
>       // ...
>       plugins: [
>         webpack.HotModuleReplacementPlugin(),
>        // ...
>       ]
>     }
> 
>  *  打开 `webpack-dev-server` 的热更新开关，
> 
>     // webpack.config.js
>     module.exports = {
>       // ...
>       devServer: {
>         hot: true,
>         // ...
>       }
>     }
> 
> ** 基本原理：**webpack监听文件变化，服务端和客户端有websocket通信，服务端向客户端发送文件变化消息，客户端根据文件变化消息获取变更模块代码，进行模块代码的热替换
> 
> 1. 配置开启热更新，设置entry格式和webpack-dev-server的option，使得打包的bundle里面包含HMR runtime和websocket连接的代码  
> 2. webpack-dev-server通过express启动服务端  
> 3. 客户端通过sockjs和服务端建立websocket长连接  
> 4. webpack监听文件变化，文件保存触发webpack重新编译，编译后的代码保存在内存中，不在output.path中产生输出  
> 5. 编译会生成hash值，hot-update.json(已改动模块的json)，hot-update.js(已改动模块的js)  
> 6. 通过socket向客户端发送hash值  
> 7. 客户端对比hash值，一致在走缓存，不一致则通过ajax获取hot-update.json，json包含模块hash值，再通过jsonp请求获取hot-update.js  
> 8. 热更新js模块，若失败，则live reload刷新浏览器代替热更新（若模块未配置热更新，则同样live reload）

###  webpack中loader和plugin的区别 ###

> **一、从功能作用的角度区分：**
> 
>  loader从字面的意思理解，是 **加载 **的意思。只专注于转化文件（transform）这一个领域，完成压缩，打包，语言翻译,仅仅只是为了打包。
> 
> plugin不仅只局限在打包，资源的加载上，它的功能要更加丰富。从打包优化和压缩，到重新定义环境变量，功能强大到可以用来处理各种各样的任务。
> 
> **二、从运行时机的角度区分**
> 
>  1 . loader运行在打包文件之前（loader为在模块加载时的预处理文件）  
>  2.  plugins在整个编译周期都起作用。

###  webpack打包流程 ###

> 1. 生成options (将webpack.config.js和shell中的参数，合并中options对象)  
> 2. 实例化complier对象 （webpack全局的配置对象，包含entry，output，loader，plugins等所有配置信息）  
> 3. 实例化Compilation对象 (compiler.run方法执行，开始编译过程，生成Compilation对象)  
> 4. 分析入口js文件，调用AST引擎(acorn)处理入口文件，生成抽象语法树AST，根据AST构建模块的所有依赖  
> 5. 通过loader处理入口文件的所有依赖，转换为js模块，生成AST，继续遍历，构建依赖的依赖，递归，直至所有依赖分析完毕  
> 6. 对生成的所有module进行处理，调用plugins，合并，拆分，生成chunk  
> 7. 将chunk生成为对应bundle文件，输出到目录

### 前端容灾方法 ###

> 前端容灾指的是当后端接口挂了，依然可以保证页面展示信息完整。我们以百度首页中新闻模块举例，当你打开百度的时候，服务端渲染好的页面出来以后，需要请求新闻接口拿到数据渲染新闻模块。你的老板告诉你，不论任何情况，必须展示新闻和广告，即使新闻接口挂了。这个时候怎么办，也就是前端容灾的范畴了。
> 
> **localstorage缓冲接口数据**  
> 
> 
> 新闻模块的接口，每次有返回的时候，都存入localstorage中，以接口路径为key，返回数据为value，当新闻接口请求失败的时候先从localstorage中读上次成功请求时候的数据，展示出来。
> 
> **备份一份静态数据到CDN**
> 
> 让业主方同学提供一份兜底新闻数据，存放在CDN上，新闻接口返回失败，用户localstorage中也没有数据的时候，去CDN对应地址拉取数据渲染
> 
> **利用Service worker的caches API做页面接口缓存**
> 
> Service worker提供了fetch事件可供监听，当页面发出请求的时候，会先过fetch方法，你可以在这里定义任何你需要的缓存策略，比如请求成功后，将结果存入caches。Service worker中，你甚至可以缓存当前页面的HTML，让网站离线运行。
> 
> 通过上面这些手段，可以保证只要给用户吐出HTML就能保证页面完整性。对于让页面始终可吐出HTML这件事，那就又属于后端，运维同学所做的了。可以借助上面我介绍到的集群的方式，也可以通过CDN的方式(动态DNS)来解决。

### 什么是服务端渲染ssr？为什么利于SEO? ###

> 简单理解是将组件或页面通过服务器生成html字符串，再发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序
> 
> **SSR的优势**
> 
> 1. 更利于SEO。（服务端渲染返回给客户端的是已经获取了异步数据并执行JavaScript脚本的最终HTML，网络爬中就可以抓取到完整页面的信息。）
> 
> 2. 更利于首屏渲染（首屏的渲染是node发送过来的html字符串，并不依赖于js文件了，这就会使用户更快的看到页面的内容。尤其是针对大型单页应用，打包后文件体积比较大，普通客户端渲染加载所有所需文件时间较长，首页就会有一个很长的白屏等待时间。）
> 
> **SSR的局限**
> 
> 1.  服务端压力较大（本来是通过客户端完成渲染，现在统一到服务端node服务去做。尤其是高并发访问的情况，会大量占用服务端CPU资源）
> 2.  开发难度大，学习成本高
> 
> ** 时间耗时比较**
> 
> 由服务端请求首屏数据，而不是客户端请求首屏数据，这是“快”的一个主要原因。服务端在内网进行请求，数据响应速度快。客户端在不同网络环境进行数据请求，且外网http请求开销大，导致时间差。
> 
> 服务端渲染是先向后端服务器请求数据，然后生成完整首屏html返回给浏览器；而客户端渲染是等js代码下载、加载、解析完成后再请求数据渲染，等待的过程页面是什么都没有的，就是用户看到的白屏。就是服务端渲染不需要等待js代码下载完成并请求数据，就可以返回一个已有完整数据的首屏页面。
> 
>

### 语义化标签的作用 ###

> 1、使页面结构清晰，即使没有css。便于后期维护。
> 
> 2、便于机器读取SEO,有助于爬虫抓取更多的有效信息，爬虫是依赖于标签来确定上下文和各个关键字的权重。

### SEO及其优化方案 ###

>  SEO：SearchEngineOptimization 搜索引擎优化。说白了就是让浏览器知道你的网页有什么内容，从而确定网页的排名。
> 
>  *  简化代码结构，更利用搜索引擎分析抓取有用内容，所有js、css采用外联方式，图片采用css精灵，减少请求次数
>  *  优化布局，把重要的内容HTML代码放在最前，所有引擎抓取HTML内容是从上到下，利用这一特点，可以让主要代码有限读取，广告等不重要的代码放在下面。
>  *  每个页面只能出现一次h1标签，h2可以出现多次，H1权重很高，普通认为仅次于title，一般资讯详情也得标题、商品详情也得标题，都放在H1里
>  *  图片一定要添加alt属性，title属性可选，蜘蛛不认识图片上的内容，只能通过alt属性来判断，如果是商品列表也，所有商品都加了alt和title的话，容易造成堆砌关键词，所以一般都只加alt属性
>  *  图片大小声明： 如果图片大小不做定义的话，页面需要重新渲染，就会影响到速度
>  *  非特殊性链接， 链接地址一定要写入herf属性，做过SEO优化的人员都知道，爬虫目前对于js的支持很差，基本无法读取里面的链接地址，所用说用click事件是绝对不允许的，特别是一些重要的导航链接
>  *  网页结构呈扁平状树型，目录结构不宜过深，每个页面离首页最多点击不超过三次，过深不利于搜索引擎的抓取
>  *  做好404页面，一般都会加首页链接及错误提示，并测试其返回状态码为404，用户体验友好，可以留住用户不至于直接关闭页面，蜘蛛友好，可以返回抓取其他页面
>  *  重要内容不要用js输出，重要内容必须放在HTML里

### 如何重构一个项目？ ###

> **一、原项目梳理**
> 
> 1.  **页面结构**
> 2.  **项目结构**
> 3.  **前端框架、模板**
> 4.  **第三方库、组件、插件**
> 
> **二、重构方案确立**
> 
> 1.  **开发规范**
> 2.  **技术选型**
> 3.  **构建工具**
> 4.  **开发效率**
> 5.  **性能优化**
> 6.  **模块化组件化**
> 7.  **前端安全**
> 8.  **用户体验**

###  **一个页面上有大量的图片（大型电商网站），加载很慢，你有哪****些方法优化这些图片的加载，给用户更好的体验 ？** ###

>  *  图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端 的距离与页面的距离，如果前者小于后者，优先加载。
>  *  如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先 下载。
>  *  如果图片为 css 图片，可以使用 CSSsprite，SVGsprite，Iconfont、Base64 等技术。 如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图， 以提高用户体验。
>  *  如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩， 图片压缩后大小与展示一致。

###  **Web安全及防护原理 ** ###

> **sql注入原理**
> 
> 就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。
> 
> 总的来说有以下几点：
> 
> `1.永远不要信任用户的输入，要对用户的输入进行校验，可以通过正则表达式，或限制长度，对单引号和双"-"进行转换等。`
> 
> `2.永远不要使用动态拼装SQL，可以使用参数化的SQL或者直接使用存储过程进行数据查询存取。`
> 
> `3.永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限有限的数据库连接。`
> 
> `4.不要把机密信息明文存放，请加密或者hash掉密码和敏感的信息。`
> 
> **XSS原理**
> 
> Xss(cross-site scripting)攻击指的是攻击者往Web页面里插入恶意 `html`标签或者`javascript`代码。比如：攻击者在论坛中放一个看似安全的链接，骗取用户点击后，窃取`cookie`中的用户私密信息；或者攻击者在论坛中加一个恶意表单，
> 
> 当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户原本以为的信任站点。
> 
> **XSS防范方法**
> 
>  *  首先代码里对用户输入的地方和变量都需要仔细检查长度和对`”<”,”>”,”;”,”’”`等字符做过滤；其次任何内容写到页面之前都必须加以`encode`，避免不小心把`html tag` 弄出来。这一个层面做好，至少可以堵住超过一半的`XSS` 攻击。
>  *  首先，避免直接在`cookie` 中泄露用户隐私，例如email、密码等等。其次，通过使`cookie` 和系统`ip` 绑定来降低`cookie` 泄露后的危险。这样攻击者得到的`cookie` 没有实际价值，不可能拿来重放。
>  *  如果网站不需要再浏览器端对`cookie` 进行操作，可以在`Set-Cookie` 末尾加上`HttpOnly` 来防止`javascript` 代码直接获取`cookie` 。
>  *  尽量采用`POST` 而非`GET` 提交表单
> 
> **XSS与CSRF区别**
> 
> `XSS`是获取信息，不需要提前知道其他用户页面的代码和数据包。`CSRF`是代替用户完成指定的动作，需要知道其他用户页面的代码和数据包。
> 
> 要完成一次`CSRF`攻击，受害者必须依次完成两个步骤：
> 
> 1.  `登录受信任网站A，并在本地生成Cookie。`
> 2.  `在不登出A的情况下，访问危险网站B。`
> 
> **CSRF的防御**
> 
>  *  ### 服务端的`CSRF`方式方法很多样，但总的思想都是一致的，就是在客户端页面增加伪随机数。 ###
>  *  ### 通过验证码的方法 ###

###  常见浏览器兼容 ###

> **css兼容**  
> 1. 不同浏览器的标签默认的margin和padding不同  
> 2. css3新属性，加浏览器前缀兼容早期浏览器  
> 3. 超链接访问过后hover样式就不出现的问题  
> 4.css hack解决浏览器兼容性  
> **js兼容**  
> 1.事件绑定  
> 2. event事件对象问题  
> 3. event.srcElement(事件源对象)问题  
> 4. 阻止事件冒泡传播  
> 5. 阻止事件默认行为  
> 6. ajax兼容问题
> 
> [https://blog.csdn.net/weixin\_52012977/article/details/112802551][https_blog.csdn.net_weixin_52012977_article_details_112802551]

[rollup]: https://github.com/rollup/rollup
[react]: https://github.com/facebook/react
[vue]: https://github.com/vuejs/vue
[preact]: https://github.com/developit/preact
[three.js]: https://github.com/mrdoob/three.js
[moment]: https://github.com/moment/moment
[d3]: https://github.com/d3/d3
[https_blog.csdn.net_weixin_52012977_article_details_112802551]: https://blog.csdn.net/weixin_52012977/article/details/112802551