受控组件

由外部控制的组件叫做受控组件

headless component

组件由逻辑+UI组成，headless compoent是只有逻辑而没有UI的组件。
好处是节省UI代码体积，方便使用者自定义样式。

v-for的key不使用index

key作为元素的唯一标识，使用数组索引作为key，当向数组插入或删除元素时，可能会导致数据不更新，因为vue采用了原地更新策略
Blog
demo

+和~选择器

+：选择后面的紧邻兄弟元素
~：选择之后的所有兄弟元素

跨域解决方案

  1. JSONP
  2. CORS：Acces-Control-Allow-Orgin: *
  3. proxy:
    1. 开发阶段：webpack-dev-server
    2. 生产环境：nginx

CSS实现长宽比固定矩形

  1. padding-bottom设置百分数，但是不能放内容
  2. 新属性：aspect-ratio: 1/2

伪类选择器有哪些？

  1. ::before ::after
  2. ::selection：选中内容时，如设置选中文字的样式

prefetch和preload区别

  1. <link rel="prefetch" href="style.css" as="style" />
  2. <link rel="preload" href="main.js" as="script" />
  1. preload 加载当前路由必需资源，优先级高。一般对于 Bundle Spliting 资源与 Code Spliting 资源做 preload
  2. prefetch 优先级低，在浏览器 idle 状态时加载资源。一般用以加载其它路由资源，如当页面出现 Link，可 prefetch 当前 Link 的路由资源。（next.js 默认会对 link 做懒加载+prefetch，即当某条 Link 出现页面中，即自动 prefetch 该 Link 指向的路由资源

浏览器如何禁止复制？

  1. user-select: none;禁止选中
  2. 监听dom元素的copy事件

package.json

main: import 文件时去该字段查找
exports: 为不同环境暴露包模块
version: semver规范

  1. {
  2.   "name": "my-awesome-lib",
  3.   …
  4.   "exports": {
  5.     ".": {
  6.       "browser": {
  7.         "default": "./lib/whole-lib.browser.js"
  8.       }
  9.     },
  10.     "module-a": {
  11.       "import": "./lib/public-module-a.mjs",
  12.       "require": "./lib/public-module-a.cjs"
  13.     },
  14.     "module-b": {
  15.       "import": "./lib/public-module-b.mjs",
  16.       "require": "./lib/public-module-b.cjs"
  17.     }
  18.   }
  19. }
  1. // CommonJS flavor
  2. const moduleA = require('my-awesome-lib/module-a')
  4. // ESModule flavor
  5. import moduleA from 'my-awesome-lib/module-a'
  7. // 行不通的！
  8. const moduleA = require('my-awesome-lib/lib/public-module-a')
  9. const moduleC = require('my-awesome-lib/internals/private-module-c')
  10. import moduleA from 'my-awesome-lib/lib/public-module-a'
  11. import moduleC from 'my-awesome-lib/internals/private-module-c'

version/semver规范

  • ^1.2.3：第一个版本号保持不变，后面两个版本号保持最新
  • ~1.2.3：前面两个版本号不变，后面一个保持最新

peerDependencies

指定使用该包时必须要有的依赖，例如Element-Plus给Vue作为组件库，那么使用Element-Plus就必须要有Vue这个环境。

如何提升webpack构建速度

  1. 开启cache：webpack5支持
  2. thread-loader多线程
  3. 使用一些快的loader，如swc-loader替代babel-loader

压缩JS体积

  • terser-webpack-plugin
    • 去除空格
    • 变量名缩短
    • 预计算

Vite处理CJS

转为ESM，不过也不是所有多可以转，毕竟require是一个函数，还会有default问题
转换后也可以做一些treeshaking操作。

JSON 可以treeshaking吗？

如在一个文件中导入一个JSON。
可以做到，因为JSON就是简单键值对，可以把没用到的键值去除

204/206

204: no content
206: particial content