学习笔记——vite 打包构建优化之tree shaking

vite 打包构建优化

开发环境优化
生产环境优化

tree shaking 解释说明

1、代码引入但是没有使用对应函数

1.1、如果代码中有副作用

副作用的理解：如修改全局变量、修改 DOM、执行日志等

js 复制代码

/* 本身就是副作用 */
console.log("side effect");
/* 这种/ 上面描述这种 副作用 我们可以通过 特殊方式进行处理 来让他们打包进入我们的最终产物中 */
window.abc = "hello";

1.2、解决方案

🟢 1.2.1、通过 package.json 中配置 sideEffects

json 复制代码

// package.json 中 配置 sideEffects 为false 表示 代码中没有副作用  为 true 表示 代码中有副作用
"sideEffects": false

json 复制代码

"sideEffects": true

🟢 1.2.2、通过添加注释说明代码中没有副作用

js 复制代码

/*#__PURE__*/ console.log(
  "我本身是有副作用的 但是你给我加了这个注释 那我就没有副作用了"
);
console.log("我本身是有副作用的 你没有给我加注释 所以我就是有副作用的");

js 复制代码

console.log("我本身是有副作用的 但是你给我加了这个注释 那我就没有副作用了");

console.log("我本身是有副作用的 你没有给我加注释 所以我就是有副作用的");

🟢 1.2.3、

🟢 1.2、如果代码中没有副作用

js 复制代码

export function square(x: any) {
  const a = "我是过节";
  return x * x + a;
}
export function cube(x: any) {
  return x * x * x;
}

js 复制代码

如果只是在其他模块引入 但是没有使用 里面的函数 则不会将此函数打包进最终的代码

🔴 3、遇到的问题 lodash 引用一个但是打包产物是整个产物
- 🟢 3.1、

js 复制代码

/* 错误的引入方式 */
import * as _ from "lodash";
/* 1. 使用按需导入 在我的项目中 占用 5% */
import shuffle from "lodash/shuffle"; // 只引入 shuffle 函数
/* 2. 使用 lodash-es（ES Module 版本） 占用 3% */
import { shuffle } from "lodash-es"; // 支持按需导入

bash 复制代码

 npm install lodash-es

学习笔记——vite 打包构建优化之tree shaking

vite 打包构建优化

tree shaking 解释说明

1、代码引入但是没有使用 对应函数

1.1、 如果代码中有副作用

1.2、解决方案

1、代码引入但是没有使用对应函数

1.1、如果代码中有副作用