工程化

常用的 git 命令

工作区、暂存区、本地仓库、远程仓库

• git clone：克隆远程仓库到本地。
• git init：在当前目录初始化一个新的 Git 仓库。
• git pull ：拉取远程仓库的更新并直接合并到当前分支。
• git add：将文件添加到暂存区，准备提交。
• git commit -m "commit_message" ：提交暂存区的改动到本地仓库，附带提交信息。
• git status：查看工作区、暂存区的状态，显示文件的修改情况。
• git push ：将本地分支的更新推送到远程仓库。
• git stash：把所有未提交的修改（包括暂存的和非暂存的）存储到一个新的堆栈中。
• git stash pop： 将堆栈中的最近一个提交弹出，更新到本地工作区。
• git fetch：将远程仓库的更新拉到本地，由用户决定是否合并。
• git merge ：将指定分支合并到当前分支。
• git reset --hard：回滚到指定版本。
• git log：显示提交日志，包括提交哈希、作者、日期等信息。
• git branch：列出所有分支，当前分支前会有一个星号。
• git checkout ：切换到指定分支。
• git checkout -b ：创建并切换到新分支。
• git diff：显示工作区与暂存区之间的差异。

webpack 配置有哪些

• entry：入口文件
• output：输出文件配置
• resolve：用来配置模块的解析方式
• module：用来配置模块如何被解析 loader 在 module 中使用
• plugins：插件
• devServer：开发服务器配置
• devtool：调试工具
• optimization：优化相关配置

有哪些常见的 Loader 和 Plugin？

Loader：

• url-loader ：将文件转为 base64 格式，提供 limit 参数，大于 limit 的会使用 file-loader
• file-loader：将文件独自打包。
• less-loader：加载 LESS，转化为 CSS 代码。
• css-loader ：将 css 文件变成 commonjs 模块加载 js 中，里面内容是样式字符串。
• style-loader ：创建 style 标签，将 js 中的样式资源加入其中，会有闪屏现象。
• postcss-loader：css 兼容性处理。
• eslint-loader : 通过 ESLint 检查 JavaScript 代码
• tslint-loader : 通过 TSLint检查 TypeScript 代码
• babel-loader : 把 ES6 转换成 ES5

Plugin：

• html-webpack-plugin ：复制 html 模板文件，并自动引入打包输出的所有资源（JS/CSS），压缩 html
• mini-css-extract-plugin：取代 style-laoder，提取 js 中的 css 成单独文件，通过 link 引入，而不是style标签，避免了闪屏现象。
• optimize-css-assets-webpack-plugin：压缩 css
• webpack-parallel-uglify-plugin : 多进程执行代码压缩，提升构建速度

那你再说一说 Loader 和 Plugin 的区别？

功能不同：

• Loader本质是一个函数，它是一个转换器。webpack只能解析原生js文件，对于其他类型文件就需要用loader进行转换。
• Plugin它是一个插件，用于增强webpack功能。webpack在运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 webpack 提供的 API 改变输出结果。

用法不同：

• Loader的配置是在module.rules下进行。类型为数组，每⼀项都是⼀个 Object ，⾥⾯描述了对于什么类型的⽂件（ test ），使⽤什么加载( loader )和使⽤的参数（ options ）
• Plugin的配置在plugins下。类型为数组，每一项是一个 Plugin 的实例，参数都通过构造函数传入。

什么是 Code Splitting ？

通常Webopack会将所有代码打包到一个单独的bundle中，然后在页面加载时一次性加载整个bundle。这样的做法可能导致初始加载时间过长。

Code Splitting 解决了这个问题，它将应用程序的代码划分为多个代码块，每个代码块代表不同的功能或路由。这些代码块可以在需要时被动态加载，使得页面只加载当前所需的功能，而不必等待整个应用程序的所有代码加载完毕。

在Webpack中通过 optimization.splitChunks 配置项来开启代码分割。

// 通过js代码，让某个文件被单独打包成一个chunk
// import动态导入语法：能将某个文件单独打包
import(/* webpackChunkName: 'test' */'./test')
  .then(({ mul })=> {
    console.log(mul(2, 4));
  })
  .catch(() => {
    console.log('文件加载失败了');
  })

如何减少打包后的代码体积

• 代码分割（Code Splitting） ：将应用程序的代码划分为多个代码块，按需加载。这可以减小初始加载的体积，使页面更快加载。
• Tree Shaking：配置Webpack的Tree Shaking机制，去除未使用的代码。
• 压缩代码：使用插件分别压缩 html、css、js 代码。减小文件体积。
• 使用生产模式：在Webpack中使用生产模式，通过设置 mode: 'production'来启用优化。这会自动应用一系列性能优化策略，包括代码压缩和Tree Shaking。
• 使用压缩工具：使用现代的压缩工具，来对静态资源进行压缩，从而减小传输体积。
• 利用CDN加速：将项目中引用的静态资源路径修改为 CDN 上的路径，减少图片、字体等静态资源的大小。