每周小结

css中will-change的了解

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

😼不要将 will-change 应用到太多元素上,😼有节制地使用(通常，当元素恢复到初始状态时，浏览器会丢弃掉之前做的优化工作。但是如果直接在样式表中显式声明了will-change属性，则表示目标元素可能会经常变化，浏览器会将优化工作保存得比之前更久),😼不要过早应用 will-change 优化(过度使用will-change会导致大量的内存占用),😼给它足够的工作时间(使用时需要尝试去找到一些方法提前一定时间获知元素可能发生的变化，然后为它加上will-change 属性)

代码是vite中vue模板组件，给标题加上的will-change属性

package.json中type字段的作用

😮type字段用于定义package.json文件和该文件所在目录根目录中.js文件和五拓展名文件的处理方式。😮值为module则当作es模块处理，值为commonjs则被当作commonJs模块处理。😮目前node默认的是如果package.json没有定义type字段，则按照commonJs规范处理,node官方建议包的开发者明确指定package.json中type字段的值。😮无论package.json中的type字段为何值,.mjs的文件都按照es模块来处理，.cjs的文件都按照commonJs模块来处理

项目根目录下(与src同级)jsconfig.json的作用

compilerOptions.baseUrl: 目录基准，可以让您设置解析非绝对路径模块名时的基准目录。 你可以定义一个根目录，以绝对路径进行文件解析。

baseUrl
├── ex.ts
├── hello
│   └── world.ts
└── tsconfig.json

在这个项目中"baseUrl": "./",脚本从最初jsconfig.json的文件为不同的目录，在不同的目录中。

import { helloWorld } from "hello/world";
console.log(helloWorld);

intelligence vscode编译器会有智能提示，能找到类似别名@等的路径文件

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    // 你可以定义一个根目录，以绝对路径进行文件解析
    "baseUrl": "./",
    "moduleResolution": "node",
    // 一些将模块导入重新映射到相对于 baseUrl 路径的配置,好让ide识别到路径
    "paths": {
      "@/*": [
        "src/*"
      ],
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  //提高 IDE 性能
  "exclude": ["node_modules", "dist", "build",".vscode"],
  "vueCompilerOptions": {
    "experimentalDisableTemplateSupport": true
  }
}

2022-08-15 至 2022-08-21 每周小结