前端八股大全
npx 是 Node.js 的一个命令行工具，用于执行 Node.js 包里的可执行文件。它的工作原理如下：查找可执行文件： 当你在命令行中运行 npx <command> 时，npx 首先会检查你本地的 node_modules/.bin 目录，查找是否存在 <command> 的可执行文件。如果找到了，就会直接执行该可执行文件。安装缺失的包： 如果本地没有安装所需的包，npx 会自动帮你安装该包（以及它的依赖项），然后执行该包的可执行文件。默认情况下，npx 会从 npm registry（npm 公共仓库）下载包，但你也可以通过 --registry 参数指...
Webpack 的代理（Proxy）功能是通过配置 devServer 中的 proxy 实现的。这个功能的原理比较简单，主要是通过拦截客户端发送的请求，然后将这些请求转发到目标服务器上，最后再将目标服务器的响应返回给客户端。下面是代理的基本原理和实现步骤：拦截请求：开发服务器在启动时会创建一个本地服务器，用于接收客户端发送的请求。当客户端发送请求时，开发服务器会拦截这些请求。匹配代理规则：开发服务器会根据配置的代理规则检查请求的路径是否与任何代理规则匹配。代理规则通常包括目标服务器的地址和需要代理的路径规则。转发请求：如果请求的路径与某个代理规则匹配成功，开发服务器会将这些请求转发到配...
loaderbabel-loader：用于将 ES6+ 代码转换为向后兼容的 JavaScript 代码。css-loader：用于解析 CSS 文件，处理 CSS 中的 url() 等。style-loader：将 CSS 代码以 <style> 标签的形式插入到 HTML 文件中。sass-loader：用于解析 SASS/SCSS 文件，将其转换为 CSS。less-loader：用于解析 Less 文件，将其转换为 CSS。file-loader：用于处理文件，将文件输出到指定的目录，并返回文件 URL。url-loader：类似于 file-loader，但可以根据...
搭建一个 npm 私服可以让团队或组织内部更好地管理和共享 JavaScript 包。以下是搭建 npm 私服的步骤：1. 选择适合的 npm 私服工具有几个常用的 npm 私服工具可供选择，其中最流行的是 Sinopia、Verdaccio 和 Nexus Repository。它们都提供了类似的功能，但在配置和使用方面可能会有些差异。你可以根据自己的需求和偏好选择其中一个。2. 安装和配置选择好工具后，按照官方文档或社区指南进行安装和配置。通常情况下，你需要通过 npm 安装相应的工具，然后运行一些配置命令来设置私服。3. 启动私服安装和配置完成后，通过运行相应的命令来启动私服服务。...
分别是什么作用在 npm 中，dependencies、devDependencies 和 peerDependencies 是用来管理项目依赖的三个重要字段。dependencies：dependencies 字段用于指定项目运行时所依赖的模块。这些模块会被安装到 node_modules 目录下，并且会被打包到生产环境的构建文件中。通常包含的是项目运行时必需的依赖项，如框架、库等。devDependencies：devDependencies 字段用于指定项目开发时所依赖的模块。这些模块不会被打包到生产环境的构建文件中，而是只会被安装到开发环境中。通常包含的是项目构建、测试、打包等开...
参考链接：🥇🥇🥇一文带你打通微前端-qiankun/microapp/icestark/wujie全解析参考链接：2023微前端技术方案选型参考链接：微前端（无界）参考链接：微前端参考链接：从零到一实现企业级微前端框架，保姆级教学
1、轮询打包后的 index.html，比较生成的 js 文件的 hash项目打包后，index.html 会包含打包后的 js 文件，这些文件的文件名包含的 hash 将会和上一次打包的不同，比较 hash 也就能判断是否有版本更新；let firstV = [] //记录初始获得的 script 文件字符串 let currentv = [] //记录当前获得的 script 文件字符串 // 获得的文件字符串类似这样 `<script src="/js/chunk-vendors.1234fff.js"></script>` asyn...
区别CommonJS（简称CJS）和 ES Modules（简称ESM）是两种不同的模块系统，它们在定义、导出、导入和加载模块时有一些区别。语法差异：CommonJS 使用 require() 来导入模块，使用 module.exports 或 exports 来导出模块。ES Modules 使用 import 和 export 语句来导入和导出模块。加载时机：CommonJS 模块是动态加载的，即在运行时加载并执行模块代码。ES Modules 是静态加载的，模块会在编译时就进行解析和加载。导出方式：CommonJS 的导出是一种“值拷贝”，即模块导出的值在导入模块中是一份新的拷贝。...
Tree shaking 是一种优化 JavaScript 代码的技术，其主要目的是消除未使用的代码（dead code），以减少最终打包文件的体积。在 JavaScript 生态中，Tree shaking 主要与模块化打包工具（如Webpack、Rollup等）结合使用。Tree shaking 的原理基于静态代码分析。它通过分析模块之间的依赖关系和导出关系，以及对代码的静态分析，来确定哪些代码不会被执行，进而将这些无用代码从最终打包结果中剔除。具体来说，Tree shaking 的原理如下：静态分析模块依赖： 模块化打包工具首先会对入口文件进行静态分析，构建模块之间的依赖关系图（d...
在划分大型Vue或React项目的目录结构时，可以遵循一些通用的最佳实践，以提高项目的可维护性、可扩展性和可读性。以下是一个通用的目录结构示例：project/ │ ├── public/ # 公共资源目录 │ ├── index.html # 入口 HTML 文件 │ └── favicon.ico # 网站图标 │ ├── src/ # 源代码目录 │ ├── assets/ # 静态资源文件 │ │ ├── images/ ...
在 Webpack 中，loader 和 plugin 是两种不同的概念，它们分别用于处理不同的任务，有着不同的作用和使用方式。1. Loader：Loader 用于对模块源代码进行转换，它可以将不同类型的文件（如 JavaScript、CSS、图片等）转换为 Webpack 能够处理的模块。Loader 是一个函数或者一个包含了 loader 属性的对象，它接收源文件作为参数，对源文件进行处理，并返回处理后的结果。Loader 可以串联使用，多个 Loader 会形成一个 Loader 链，按照从右到左的顺序依次执行，最终将处理后的结果交给下一个 Loader 或者 Webpack 进...
1. 使用最新版本的 Webpack：新版本的 Webpack 往往会针对性能进行优化和改进，因此始终使用最新版本可以获得最佳性能。2. 合理配置 webpack.config.js：通过合理配置 Webpack 的配置文件，如减少不必要的 loader 和 plugin，使用 DllPlugin 和 HardSourceWebpackPlugin 等提高构建速度的插件，可以有效提升 Webpack 的性能。3. 使用多进程/多实例构建：Webpack 5 提供了新的缓存策略和持久化缓存，可以减少重复构建的时间。同时，可以通过开启多进程/多实例构建（使用 webpack-parallel...
1、开发模式的差异在开发环境中，Webpack 是先打包再启动开发服务器，而 Vite 则是直接启动，然后再按需编译依赖文件。（大家可以启动项目后检查源码 Sources 那里看到）这意味着，当使用 Webpack 时，所有的模块都需要在开发前进行打包，这会增加启动时间和构建时间。而 Vite 则采用了不同的策略，它会在请求模块时再进行实时编译，这种按需动态编译的模式极大地缩短了编译时间，特别是在大型项目中，文件数量众多，Vite 的优势更为明显。2、对ES Modules的支持现代浏览器本身就支持 ES Modules，会主动发起请求去获取所需文件。Vite充分利用了这一点，将开发环境...
参考链接：前端依赖管理-npm依赖管理机制参考链接：字节的一个小问题 npm 和 yarn不一样吗？参考链接：字节的一个小问题npm 和 yarn不一样吗？(续篇)
首页白屏原因：单页面应用的 html 是靠 js 生成，因为首屏需要加载很大的js文件(app.js vendor.js)，所以当网速差的时候会产生一定程度的白屏如何优化首页加载速度：代码拆分。code split、动态import、路由懒加载多页面+单页面组合，不是整个网站都是同一个页面切换前端路由，酌情拆分一些其他页面作为新页面直出ssr。使用ssr减少前端跑js的时间，逻辑放服务端处理把完整的页面返回部分直出。使用ssr服务端压力会变大，所以可以把页面重要的部分先直出，非重要部分放前端合理使用resource hint，即preload，prefetch, dns-connect等...
1、路由懒加载路由懒加载的原理2、组件懒加载组件懒加载的使用场景3、合理使用 Tree shakingTree shaking 并不是万能的4、骨架屏优化白屏时长骨架屏插件5、长列表虚拟滚动虚拟滚动插件6、Web Worker 优化长任务Web Worker 的通信时长7、requestAnimationFrame 制作动画8、JS 的6种加载方式1）正常模式2）async 模式3）defer 模式4）module 模式5） preload6）prefetch加载方式总结9、图片的优化图片的动态裁剪图片的懒加载使用字体图标图片转 base64 格式SSR/SSGpreloadprefet...
出现原因如何进行高效的多人协作？如何保证项目的可维护性？如何提高项目的开发质量？如何降低项目生产的风险？目的为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间如何做模块化组件化规范化自动化模块化js分模块，webpack同步打包/异步加载资源模块化，无需考虑css，图片，字体图标等路径和资源依赖问题webpack各种loader和plugin对不同资源进行处理项目结构清晰，一目了然组件化没有组件包含HTML JS CSS 成独立的单元，可以重复使用，利于构建和管理页面规范化规范目录结构，规范编码习惯（HTML ,JS ,CSS, 图片等等），规范前后端接口，gi...
没有更多了
最近评论