这是我参与「第五届青训营」笔记创作活动的第16天

一、本堂课重点内容：

项目初始化
使用 Sass/Scss & CSS Modules
使用静态资源
生产环境 Tree Shaking

二、详细知识点介绍：

项目初始化

初始化 Vite 项目，请按照以下步骤操作：

安装 Node.js 和 npm（如果已经安装了，跳过此步骤）。
全局安装 Vite CLI：

npm install -g @vite/cli

mkdir my-vite-project
cd my-vite-project

使用 Vite CLI 初始化项目：

vite init

根据命令行提示选择项目类型并输入项目名称（可选）。
安装项目依赖：

npm install

启动开发服务器：

npm run dev

浏览器中打开http://localhost:3000,查看项目效果。

使用 Sass/Scss & CSS Modules

安装 Sass/Scss 相关依赖：

npm install -D sass node-sass sass-loader

创建一个 Sass/Scss 文件，如 styles.scss，在项目的根目录下：

mkdir styles
touch styles/styles.scss

在项目的入口文件，如 main.js 中，引入 Sass/Scss 文件：

import './styles/styles.scss'

配置 vite.config.js 文件，告诉 Vite 如何处理 Sass/Scss 文件：

module.exports = {
  ...,
  css: {
    extract: process.env.NODE_ENV === 'production',
    modules: {
      auto: true,
    },
  },
  ...,
  build: {
    ...,
    loaders: {
      ...,
      scss: {
        implementation: require('sass'),
      },
    },
  },
};

启动开发服务器：

npm run dev

使用静态资源

在项目的根目录下创建一个静态资源目录，如 public：

mkdir public

在静态资源目录中放置需要使用的静态资源，如图片、字体、视频等。

在项目中引用静态资源。

在 HTML 文件中引用静态资源，如：

<img src="/public/image.jpg" alt="Image">

在 JavaScript 文件中引用静态资源，如：

import image from './public/image.jpg'

const img = new Image()
img.src = image
document.body.appendChild(img)

使用HMR

如果要在 Vite 项目中使用 HMR（热模块替换），请按照以下步骤操作：

安装 vue-hot-reload-api 包：

npm install -D vue-hot-reload-api

修改项目的入口文件，如 main.js，加入 HMR 相关代码：

import { createApp } from 'vue'
import App from './App.vue'

if (import.meta.hot) {
  import.meta.hot.accept()
  import.meta.hot.dispose(() => {
    window.location.reload()
  })
}

createApp(App).mount('#app')

启动开发服务器：

npm run dev

在开发过程中，如果更改了某些文件，浏览器就会自动更新这些文件，而无需整个页面刷新。

生产环境 Tree Shaking

Vite 项目中的生产环境 Tree Shaking 是一项优化技术，用于减小 JavaScript 文件的大小，并且提高项目的加载速度。

Tree Shaking 的原理是，在打包时只打包项目实际使用的模块，而不是所有的模块。这样可以减小项目的代码体积，从而提高项目的加载速度。

在 Vite 项目中使用 Tree Shaking，需要通过构建生产环境的代码来实现，并且检查生成的文件大小，以确保 Tree Shaking 正常工作。

使用 Tree Shaking 可以显著提高项目的性能，并且减少代码体积，从而为用户提供更好的体验。

三、实践练习例子：

假设有一个使用了 lodash 库的 JavaScript 文件，如下所示：

import { map, filter } from 'lodash';

const numbers = [1, 2, 3, 4, 5];

const result = map(filter(numbers, n => n > 2), n => n * 2);

console.log(result);

在构建生产环境的代码时，Tree Shaking 只会打包使用的模块，即 filter 和 map 函数，而不是所有的 lodash 库，从而减小代码体积。

这是一个简单的例子，可以帮助理解 Tree Shaking 如何减小项目的代码体积，并且提高项目的加载速度。

四、课后个人总结：

今日学习了关于 Vite 项目的知识，包括项目初始化、使用 Sass/Scss & CSS Modules、静态资源、HMR 和生产环境 Tree Shaking。通过学习了解到 Vite 是一个快速和现代的前端构建工具，提供了一系列功能，以提高前端项目的开发体验和性能。例如，使用 Sass/Scss & CSS Modules 可以更方便地管理项目的样式，使用 HMR 可以快速开发项目，而生产环境的 Tree Shaking 可以减小项目的代码体积，提高加载速度。

Vite 上手实战与架构解析 ｜ 青训营笔记