前端面试

用户6062918956699
97 阅读6分钟

微前端

微前端是一种构建网站或网络应用程序的方法，它将网站或网络应用程序分割成更小的、独立的部分，并使其协同工作。

  • 更易于管理：不同的团队可以处理网站的不同部分，而不会相互干扰。
  • 更新更快：您可以更新网站的一部分，而无需更改其他所有内容。
  • 混搭：如有需要，您可以在网站的不同部分使用不同的工具或技术。
  • 重复使用部件：您可以在不同的地方甚至不同的项目中使用网站的同一个部分。

构建微前端

  • Webpack 5 自带的 "模块联盟 "工具。github.com/thesyntaxdi… (ModuleFederationPlugin：这是共享按钮的关键。它公开了按钮组件，因此其他应用程序也可以使用它。)
  • qiankun

SEO

搜索引擎提高该网站的权重，增加对该网站的排名。白帽SEO和黑帽SEO。

  1. 对网站的标题、关键字、描述精心设置，反映网站的定位，让搜索引擎明白网站是做什么的；
  2. 网站内容优化：内容与关键字的对应，增加关键字的密度
  3. 在网站上合理设置Robots.txt文件
  4. 生成针对搜索引擎友好的网站地图sitemap；
  5. 增加外部链接，到各个网站上宣传

前端SEO规范

juejin.cn/post/730011…

1、网站结构布局优化：尽量简单、开门见山，提倡扁平化结构

（1）控制首页链接数量 （2）扁平化的目录层次 （3）导航优化 （4）网站的结构布局 （5）控制页面的大小，减少http请求，提高网站的加载速度。

  1. 网页代码优化

（1）突出重要内容 （2）语义化书写HTML代码，符合W3C标准 （3）标签：页内链接，要加 “title” 属性加以说明，让访客和 “蜘蛛” 知道 （4）正文标题要用标签：h1标签自带权重“蜘蛛” 认为它最重要， （5）重要内容用HTML输出，

3、前端网站性能优化

（1）减少http请求数量 （2）控制资源文件加载优先级 （3）尽量外链CSS和JS（结构、表现和行为的分离） （4）利用浏览器缓存 （5）减少重排（Reflow） （6）减少 DOM 操作 （7）图标使用IconFont webp替换 （8）不使用CSS表达式，会影响效率 （9）使用CDN网络缓存，加快用户访问速度，减轻服务器压力 （10）启用GZIP压缩，浏览速度变快，搜索引擎的蜘蛛抓取信息量也会增大 （11）伪静态设置

webpack5

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。它会根据配置文件的entry属性作为入口，找到各模块的依赖关系，然后将所有这些模块打包成一个或多个 bundle。webpack 只能理解 JavaScript 和 JSON 文件，因此如果想要增强它的能力，那么就需要相应的loader和plugin。另外plugin的串联执行，则用到的是 Tapable 这个库。

loader和plugin的区别

  • loader

    上面提到过 webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中，大白话就是loader一般是用来处理webpack不认识的文件类型，比如css、image、vue文件。。。所以才有css-loader、image-loader、vue-loader这些东西的存在。

  • plugin

    loader 用于转换某些类型的模块，而plugins（插件）则可以用于增强 webpack，它的执行范围更广。比如：打包优化，资源管理，注入环境变量。简单来说，webpack 在运行时会对外广播事件，插件则监听它所订阅的事件，去改变执行结果。

webpack5 新特性

内置清除输出目录

之前的版本我们经常需要一个叫 clean-webpack-plugin 的插件，来帮助我们清除上次构建的dist产物，现在我们只要一个参数的配置就可以搞定：

缓存

会缓存生成的 webpack 模块和 chunk，来改善构建速度。webpack 追踪了每个模块的依赖，并创建了文件快照，与真实的文件系统进行对比，当发生差异时，触发对应的模块重新构建。默认开启缓存，总的来说有两种类型。

  1. cache: { type: 'memory' } 这是默认配置，
  2. cache: { type: 'filesystem' } 缓存到本地文件系统，默认的缓存目录是 node_modules/.cache/webpack，当然也可以自己通过 cacheDirectory 属性配置，生成的目录结构大概是这样的：

资源模块

原生支持 json、png、jpeg、jpg、txt 等格式文件。也就是说无需配置额外的 loader，比如raw-loader、file-loader、url-loader 等等

moduleIds & chunkIds 的优化

在 webpack5 之前，没有从 entry 打包的 chunk 文件，都会以 1、2、3。。。的文件命名方式输出，这样删除某些文件由于顺序变了可能会导致缓存失效； 在 webpack5 中，生产环境下默认使用了 deterministic 的方式生成短 hash 值来分配给 modules 和 chunks 来解决上述问题

更智能的 tree shaking

webpack4 tree-shaking 是通过扫描文件中未引用到的函数实现再将其剔除实现的，作用很小，如果使用场景有嵌套的方法引用，就不管用了； function2、function4 函数已经被标记为未被使用，在打包生产环境时，将会被剔除。

另外还可以在 package.json 中配置 sideEffects:false 表示整个项目都没有副作用，webpack 在打包时会自动剔除具有副作用代码； 当然也可以指定类型或文件保留副作用，比如配置 sideEffects: ['*.css'] 表示保留 import './index.css' 类似的代码

模块联邦

在介绍这个新特性之前，让我们来先假想一个场景：有两个独立的项目A、B，如果在这两个项目间有公共依赖，我们通常的做法是什么？貌似能想到的最优解就是将公共依赖做成npm包，然后两个项目分别安装，但是在每次对这个npm包升级的时候，两个项目都需要重新更新版本号。项目一旦多了，这样是不是有点繁琐？

基于此，webpack5 推出了模块联邦（Module Federation）这一新特性。用大白话来解释就是，webpack 提供了一种解决方案，将公共依赖打包放在远程地址，各项目间通过 CDN 的方式引用，以达到一种在线 runtime 的效果，

avatar
文章
阅读
粉丝