- 博客(88)
- 收藏
- 关注
RSS订阅原创 2023秋招前端面试必会的面试题
XSS 攻击指的是跨站脚本攻击，是一种代码注入攻击。攻击者通过在网站注入恶意脚本，使之在用户的浏览器上运行，从而盗取用户的信息如 cookie 等。XSS 的本质是因为网站没有对恶意代码进行过滤，与正常的代码混合在一起了，浏览器没有办法分辨哪些脚本是可信的，从而导致了恶意代码的执行。获取页面的数据，如DOM、cookie、localStorage；DOS攻击，发送合理请求，占用服务器资源，从而使用户无法访问服务器；破坏页面结构；流量劫持（将链接指向某网站）；
2023-03-15 12:03:14
780
原创 一文彻底读懂webpack常用配置
使用purgecss-webpack-plugin，要配合mini-css-extract-plugin一起使用。根据浏览器的user agent 动态下发polyfill。使用image-webpack-loader。再通过manifest关联抽离的包。最后将抽离的包插入html模板中。
2023-03-15 12:03:01
1177
原创 美团前端高频面试题集锦
在新老虚拟DOM对比时首先，对比节点本身，判断是否为同一节点，如果不为相同节点，则删除该节点重新创建节点进行替换如果为相同节点，进行patchVnode，判断如何对该节点的子节点进行处理，先判断一方有子节点一方没有子节点的情况(如果新的children没有子节点，将旧的子节点移除)比较如果都有子节点，则进行updateChildren，判断如何对这些新老节点的子节点进行操作（diff核心）。匹配时，找到相同的子节点，递归比较子节点。
2023-03-15 12:02:39
715
原创 你需要知道的webpack高频面试题
webpack是一个模块打包工具，可以递归地打包项目中的所有模块，最终生成几个打包后的文件。区别：webpack支持代码分割，模块化（AMD,CommonJ,ES2015），全局分析entry 入口，告诉webpack要使用哪个模块作为构建项目的起点，默认为./src/index.jsoutput 出口，告诉webpack在哪里输出它打包好的代码以及如何命名，默认为./distloader是用来告诉webpack如何转换某一类型的文件，并且引入到打包出的文件中。
2023-03-15 12:01:47
405
1
原创 webpack高级配置
举个例子首先 webpack.config.js配置/**在固定 a.js 用esm导出，b.js用commonjs导出不变动webpack的本质是把多个js模块合并到一个js中，即一个入口得到一个输出js文件（bundle.js）。但是导致的问题是，如果这个bundle.js文件很大，那么浏览器请求的时候，导致请求时间很长，首屏长时间白屏。所以优化手段就是把bundle.js文件拆分成多个小的js文件，同时请求，首屏当然就更快渲染显示。
2023-03-01 21:12:02
485
原创 webpack配置完全指南
对于入门选手来讲，webpack 配置项很多很重，如何快速配置一个可用于线上环境的 webpack 就是一件值得思考的事情。其实熟悉 webpack 之后会发现很简单，基础的配置可以分为以下几个方面：entryoutputmoderesolvemodulepluginsource map等，本文就来重点分析下这些部分。较小的输出包体积浏览器中更快的代码执行速度忽略开发中的代码不公开源代码或文件路径易于使用的输出资产浏览器调试工具快速增量编译可加快开发周期运行时提供有用的错误消息。
2023-03-01 21:11:07
3371
原创 如何整理自己的前端面试题库
Rollup 是一款 ES Modules 打包器。它也可以将项目中散落的细小模块打包为整块代码，从而使得这些划分的模块可以更好地运行在浏览器环境或者 Node.js 环境。输出结果更加扁平，执行效率更高；自动移除未引用代码；打包结果依然完全可读。缺点加载非 ESM 的第三方模块比较复杂；因为模块最终都被打包到全局中，所以无法实现HMR；浏览器环境中，代码拆分功能必须使用Require.js这样的AMD库。
2023-02-28 11:19:31
441
原创 webpack热更新原理(面试大概率会问)
原来 webpack 将 bundle.js 文件打包到了内存中，不生成文件的原因就在于访问内存中的代码比访问文件系统中的文件更快，而且也减少了代码写入文件的开销，这一切都归功于memory-fs，memory-fs 是 webpack-dev-middleware 的一个依赖库，webpack-dev-middleware 将 webpack 原本的 outputFileSystem 替换成了MemoryFileSystem 实例，这样代码就将输出到内存中。这就是上图中 7、8、9 步骤。
2023-02-28 11:17:46
393
原创 一年前端面试打怪升级之路
Webkit 和 Firefox 都做了这个优化，当执行 JavaScript 脚本时，另一个线程解析剩下的文档，并加载后面需要通过网络加载的资源。这种方式可以使资源并行加载从而使整体速度更快。需要注意的是，预解析并不改变 DOM 树，它将这个工作留给主解析过程，自己只解析外部资源的引用，比如外部脚本、样式表及图片。
2023-02-28 11:17:34
293
原创 webpack配置优化,让你的构建速度飞起
越来越多的项目使用webpack5来构建项目了，今天给大家带来最前沿的webpack5配置，让我们代码在编译/运行时性能更好~提升打包构建速度减少代码体积优化代码运行性能。
2023-02-28 11:17:23
1179
原创 webpack实战，手写loader和plugin
有一个很小的注意点就是，当我们在配置文件中，loader的路径时，每回都要去寻找路径文件。文件少的时候还好，但如果遇到多文件的时候呢？岂不是会很麻烦。所以，我们引用来简化它。现在我们在文件中进行改造。// 先到node_modules中去找，找不到则去./loaders目录下去找 resolveLoader : {参考前端进阶面试题详细解答通过配置，来对文件文件目录进行查找，从而简化了路径内容。
2023-02-27 14:14:21
675
原创 20道前端高频面试题（附答案）
1）Promise基本特性1、Promise有三种状态：pending(进行中)、fulfilled(已成功)、rejected(已失败)2、Promise对象接受一个回调函数作为参数, 该回调函数接受两个参数，分别是成功时的回调resolve和失败时的回调reject；另外resolve的参数除了正常值以外， 还可能是一个Promise对象的实例；reject的参数通常是一个Error对象的实例。
2023-02-27 14:13:06
770
原创 webpack模块化的原理
webpack 中实现模块化的核心就是函数，无论是commonjs模块化还是es 模块都是通过该函数来导入的。并且利用立即执行函数的特点实现了作用域的封闭避免了全局变量的污染，非常的巧妙。
2023-02-27 14:12:09
248
原创 那些高级前端是如何回答面试题的
非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）。
2023-02-24 08:43:53
196
原创 Webpack最佳实践
先简单回顾下 webpack 原理Webpack可以看做是模块打包机，把解析的所有模块变成一个对象，然后通过入口模块去加载我们的东西，然后依次实现递归的依赖关系，通过入口来运行所有的文件。由于webpack只认识js，所以需要通过一系列的loader和plugin转换成合适的格式供浏览器运行。loader主要是对资源进行加载/转译的预处理工作，其本质是一个函数，在该函数中对接收到的内容进行转换，返回转换后的结果。某种类型的资源可以使用多个loader，执行顺序是从右到左，从下到上。plugin。
2022-12-12 11:31:56
604
原创 Webpack构建速度优化
当我们的项目越来越大，webpack的配置项越来越多时，构建速度会越来越慢，所以我们需要通过一些配置来提高webpack的构建速度。
2022-12-12 11:31:29
438
原创 Webpack配置实战
本文从 Webpack 基础配置、Webpack 进阶配置 2 个角度进行讲述，从 Webpack 实践着手，和你一起了解 Webpack。
2022-12-12 11:30:14
225
原创 Webpack中的高级特性
自从以后，官方帮我们集成了很多特性，比如在生产模式下自动开启等，这篇文章我们一起来探讨一下给我们提供的高级特性助力开发。顾名思义，就是摇树，那么体现在代码模块里面就是摇掉那些没有被外部成员引用的代码，指的注意的是在生产环境下会自动开启。比如我们在代码中引入库，我们只用到了方法，那关于其他的功能模块，在生产环境下打包，并不会输出到文件里面，比如我们在里面去找的一个方法，他是完全可以找得到的。 在这里你可能会说了模式下会开启多插件，处理打包结果，怎么就能说明是做的呢，确实这种做法不能说明是做的，我们可以把设置为
2022-12-07 14:02:26
536
原创 Webpack完整打包流程分析
在前端工程领域起到了中流砥柱的作用，理解它的内部实现机制会对你的工程建设提供很大的帮助（不论是定制功能还是优化打包）。下面我们基于 webpack5 源码结构，对整个打包流程进行简单梳理并进行实现，便与思考和理解每个阶段所做的事情，为今后扩展和定制工程化能力打下基础。在流程分析过程中我们会简单实现 的一些功能，部分功能的实现会借助第三方工具：接下来我们在 目录下新建两个入口文件和一个公共模块文件：并分别为文件添加一些内容：有了打包入口，我们再来创建一个 配置文件做一些基础配置：以上配置，指定了
2022-12-07 14:01:32
484
原创 Webpack插件核心原理
围绕 Webpack 打包流程中最核心的机制就是所谓的 Plugin 机制。所谓插件即是 webpack 生态中最关键的部分， 它为社区用户提供了一种强有力的方式来直接触及 webpack 的编译过程(compilation process)。今天，我们来聊聊 Webpack 中必不可少的核心 Plugin 机制 ～本质上在 Webpack 编译阶段会为各个编译对象初始化不同的 Hook ，开发者可以在自己编写的 Plugin 中监听到这些 Hook ，在打包的某个特定时间段触发对应 Hook 注入特定的逻
2022-12-07 14:00:53
105
原创 深度解读Webpack中的loader原理
webpack 是一个现代 JavaScript 应用的静态模块打包器。那么 webpack 是怎样实现不同种类资源模块加载的呢？没错就是通过 loader。loader 用于对模块的源代码进行转换。loader 可以使你在 import 或加载模块时预处理文件。我们带着下面几个问题，彻底吃透 loader ～loader 就是一个函数，一旦有模块被 import 或者 require 时它就会去拦截这些模块的源码，对其进行改造，然后输出到另一个模块中，循环往复，最终输出到入口文件中，形成最终的代码。
2022-11-18 13:23:38
220
原创 详解webpack构建优化
当项目越来越复杂时，会面临着构建速度慢和构建出来的文件体积大的问题。webapck构建优化对于大项目是必须要考虑的一件事，下面我们就从速度和体积两方面来探讨构建优化的策略。
2022-11-18 13:22:34
466
原创 Webpack中的plugin插件机制
上一篇 「webpack 核心特性」loader 说到 webpack 的loader机制，本文主要聊一聊另外一个核心特性：插件(plugin)。插件机制就是为了完成项目中除了资源模块打包以外的其他自动化工作，解决上述的问题。plugin是用来扩展 webpack 功能的，通过在构建流程里注入钩子实现，它为 webpack 带来了很大的灵活性。
2022-11-18 13:21:24
66
原创 你需要知道的webpack高频面试题
webpack是一个模块打包工具，可以递归地打包项目中的所有模块，最终生成几个打包后的文件。区别：webpack支持代码分割，模块化（AMD,CommonJ,ES2015），全局分析entry 入口，告诉webpack要使用哪个模块作为构建项目的起点，默认为./src/index.jsoutput 出口，告诉webpack在哪里输出它打包好的代码以及如何命名，默认为./distloader是用来告诉webpack如何转换某一类型的文件，并且引入到打包出的文件中。
2022-11-16 15:54:02
281
原创 手写一个webpack插件
前端性能优化是一个老生常谈的话题，关于性能优化的技术文档和书籍都特别多。如果大家想深入学习前端性能优化相关内容，有以下推荐雅虎军规35条某东上搜“前端性能优化”，书籍也特别多。但是前端性能优化做的所有工作，都和一个灵魂拷问有极大的关系：在浏览器输入url后，发生了什么？首先url是一个域名，首先它要被解析成ip地址。如果你的设备之前访问过该url，那么本地可能会缓存ip地址。如果没有缓存过，那么就向dns服务器进行解析。根据 IP 地址和默认端口建立TCP连接，三次握手。
2022-11-16 15:51:13
78
原创 教你手写webpack常用loader
在本文中主要实现了8个平时会经常接触到的loader，包括JS的处理、CSS的处理、图片的处理。希望能够加深你我对loader的理解，在脑海中大概知道它可以做什么，或许有一天遇到问题的时候，你我可以通过这种开发loader的方式去解决。最近在工作中多多少少接触到了一点开发工具的需求——类似于babel分析文件、eslint插件、stylelint插件编写，觉得还是挺有意思的。还有postcss，他可以生成CSS的AST，之后也想去了解一下。当然，loader都写了，plugin肯定也得整一篇。
2022-11-16 15:48:44
310
原创 webpack配置完全指南
对于入门选手来讲，webpack 配置项很多很重，如何快速配置一个可用于线上环境的 webpack 就是一件值得思考的事情。其实熟悉 webpack 之后会发现很简单，基础的配置可以分为以下几个方面：entry、output、mode、resolve、module、、plugin、source map、等，本文就来重点分析下这些部分。较小的输出包体积浏览器中更快的代码执行速度忽略开发中的代码不公开源代码或文件路径易于使用的输出资产浏览器调试工具快速增量编译可加快开发周期。
2022-11-15 12:56:17
1374
原创 webpack配置完全指南
对于入门选手来讲，webpack 配置项很多很重，如何快速配置一个可用于线上环境的 webpack 就是一件值得思考的事情。其实熟悉 webpack 之后会发现很简单，基础的配置可以分为以下几个方面：entry、output、mode、resolve、module、、plugin、source map、等，本文就来重点分析下这些部分。较小的输出包体积浏览器中更快的代码执行速度忽略开发中的代码不公开源代码或文件路径易于使用的输出资产浏览器调试工具快速增量编译可加快开发周期。
2022-11-15 12:55:39
535
原创 webpack高级配置
举个例子首先 webpack.config.js配置/**在固定 a.js 用esm导出，b.js用commonjs导出不变动};};webpack的本质是把多个js模块合并到一个js中，即一个入口得到一个输出js文件（bundle.js）。但是导致的问题是，如果这个bundle.js文件很大，那么浏览器请求的时候，导致请求时间很长，首屏长时间白屏。所以优化手段就是把bundle.js文件拆分成多个小的js文件，同时请求，首屏当然就更快渲染显示。
2022-11-15 12:55:19
372
原创 一文彻底读懂webpack常用配置
使用purgecss-webpack-plugin，要配合mini-css-extract-plugin一起使用。根据浏览器的user agent 动态下发polyfill。使用image-webpack-loader。再通过manifest关联抽离的包。最后将抽离的包插入html模板中。
2022-11-15 12:54:26
570
原创 webpack模块化的原理
webpack 中实现模块化的核心就是函数，无论是commonjs模块化还是es 模块都是通过该函数来导入的。并且利用立即执行函数的特点实现了作用域的封闭避免了全局变量的污染，非常的巧妙。
2022-11-14 12:53:01
68
原创 webpack热更新原理(面试大概率会问)
原来 webpack 将 bundle.js 文件打包到了内存中，不生成文件的原因就在于访问内存中的代码比访问文件系统中的文件更快，而且也减少了代码写入文件的开销，这一切都归功于memory-fs，memory-fs 是 webpack-dev-middleware 的一个依赖库，webpack-dev-middleware 将 webpack 原本的 outputFileSystem 替换成了MemoryFileSystem 实例，这样代码就将输出到内存中。这就是上图中 7、8、9 步骤。
2022-11-14 12:52:33
134
原创 webpack配置优化,让你的构建速度飞起
越来越多的项目使用webpack5来构建项目了，今天给大家带来最前沿的webpack5配置，让我们代码在编译/运行时性能更好~提升打包构建速度减少代码体积优化代码运行性能。
2022-11-14 12:50:57
757
原创 Webpack构建速度优化
当我们的项目越来越大，webpack的配置项越来越多时，构建速度会越来越慢，所以我们需要通过一些配置来提高webpack的构建速度。
2022-11-10 10:21:08
444
原创 Webpack配置实战
本文从 Webpack 基础配置、Webpack 进阶配置 2 个角度进行讲述，从 Webpack 实践着手，和你一起了解 Webpack。
2022-11-10 10:18:54
70
原创 webpack实战，手写loader和plugin
有一个很小的注意点就是，当我们在配置文件中，loader的路径时，每回都要去寻找路径文件。文件少的时候还好，但如果遇到多文件的时候呢？岂不是会很麻烦。所以，我们引用来简化它。现在我们在文件中进行改造。// 先到node_modules中去找，找不到则去./loaders目录下去找 resolveLoader : {通过配置，来对文件文件目录进行查找，从而简化了路径内容。
2022-11-10 10:18:22
218
原创 Webpack完整打包流程分析
webpack在前端工程领域起到了中流砥柱的作用，理解它的内部实现机制会对你的工程建设提供很大的帮助（不论是定制功能还是优化打包）。下面我们基于 webpack5 源码结构，对整个打包流程进行简单梳理并进行实现，便与思考和理解每个阶段所做的事情，为今后扩展和定制工程化能力打下基础。
2022-11-08 14:30:19
273
原创 Webpack插件核心原理
围绕 Webpack 打包流程中最核心的机制就是所谓的 Plugin 机制。所谓插件即是 webpack 生态中最关键的部分， 它为社区用户提供了一种强有力的方式来直接触及 webpack 的编译过程(compilation process)。今天，我们来聊聊 Webpack 中必不可少的核心 Plugin 机制 ～
2022-11-08 14:29:52
279
原创 Webpack最佳实践
先简单回顾下 webpack 原理Webpack可以看做是模块打包机，把解析的所有模块变成一个对象，然后通过入口模块去加载我们的东西，然后依次实现递归的依赖关系，通过入口来运行所有的文件。由于webpack只认识js，所以需要通过一系列的loader和plugin转换成合适的格式供浏览器运行。loader主要是对资源进行加载/转译的预处理工作，其本质是一个函数，在该函数中对接收到的内容进行转换，返回转换后的结果。某种类型的资源可以使用多个loader，执行顺序是从右到左，从下到上。plugin。
2022-11-08 14:29:12
405
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人