Vite学习 -- 05

一.使用path.resolve的原因以及node端模块化原理的简单了解.
我们在main.js中引入文件的时候,一定会读文件.
我们如果写的是相对路径 , 那么他会尝试去拼接成绝对路径.
commonjs 规范 注入几个变量 __dirname.
eg:

const fs = require('fs'); // 处理文件的模块 (读文件， 修改文件等一系列操作).
const path = require('path');// path本质上就是一个字符串处理模块，它里面非常多的路径字符串处理方法.

// path.resolve在拼接字符串.

const result = fs.readFileSync(__dirname + '/index.js'); //我们希望基于main.js去进行一个绝对路径的生成.

console.log('result', result.toString(), procss.cwd(), __dirname);
console.log(path.resolve(__dirname,"./main.js"));

// node端去读取文件或者操作文件的时候,如果发现你用的是相对路径，则会去使用process.cwd()来进行对应的拼接.
// process.ced: 获取当前的node执行目录.

二. vite对静态资源的处理以及别名配置.
vite对静态资源基本上是开箱即用的. vite对svg依旧是开箱即用的.

1. tree shaking 摇树优化: 打包工具会自动帮你移除掉那些你没有用到的变量或者方法, 如果你用的不是vite, 在其他的一些构建工具里,json 文件的导入会作为一个JSON字符串形式存在.
   
   在resolve.alias里面配置路径别名.
   三. vite对svg资源的处理
   vite对svg 依旧是开箱即用的.

svg: 可伸缩矢量图形.
1.svg是不会失真的 2. svg尺寸小.
缺点: 没法很好的去表示层次丰富的图片信息.

我们在前端领域里更多的是用svg去做图标.

// 第一种使用svg的方式.
// const img = document.createElement('img');
// img.src = svgIcon;
// document.body.appendChild(img);

// 第二种加载svg的方式
// import svgRaw from './assets/svgs/fullScreen.svg?raw'; // 二进制 Buffer.
// import svgIcon from './assets/svgs/fullScreen.svg?url';

// console.log('svgIcon', svgIcon, svgRaw);

// const svgElement = document.getElementsByTagName("svg")[0];

// svgElement.onmouseenter = function() {
//     // 不是去改他的background 也不是 color.
//     // 而是fill属性.
//     this.style.fill = 'red';
// }

四. vite配置文件中对静态资源在生产环境的一些配置.

打包后的静态资源为什么要有hash?
由于浏览器的缓存机制，静态资源名字只要不改，那么他就会直接用缓存的. 刷新页面: 请求的名字是不是同一个？ 名字相同，读取缓存.
hash算法: 将一串字符串经过运算的到一个新的乱码字符串。利用好hash算法可以让我们更好的去控制浏览器缓存机制.

  build: { // 构建生产包时的一些配置策略
    rollupOptions: { // 配置rollup的一些构建策略
      output: { // 控制输出
         // 在rollup里面，hash代表将你的文件名和文件内容进行组合计算得来的结果.
        assetFileNames:  "[hash].[name].[ext]"
      }
    },
    assetsInlineLimit: 4096, // 4kb. 图片资源小于4kb, 会被打包成base64格式.
    outDir: 'testDist' , // 打包之后输出的chunk的名称 (配置输出目录)
    assetsDir: 'static', //打包之后静态资源文件夹的名称. (配置输出目录中的静态资源目录)
  }