各位同学，欢迎来到“前端代码瘦身大法”讲座！今天我们要聊聊JavaScript打包、摇树优化，以及那个神秘的package.json里的sideEffects字段。准备好，我们要开始一场代码减肥之旅了！
开场白：代码也需要减肥？
想象一下，你辛辛苦苦写了一个前端项目，功能强大、界面炫酷。结果用户打开页面，半天刷不出来，原因很简单：你的代码太胖了！大量的冗余代码不仅增加了加载时间，还浪费了用户的流量。因此，我们需要对代码进行“减肥”，让它变得更苗条、更高效。
第一节：JavaScript Bundling（打包）：化零为整的艺术
1.1 什么是Bundling？
简单来说，Bundling就是把项目中散落的各种JavaScript模块、CSS、图片等资源，打包成一个或几个文件（bundle）。就像把一堆零散的食材，做成一道美味佳肴。
1.2 为什么要Bundling？
- 减少HTTP请求： 以前浏览器需要发送大量的HTTP请求来获取每个文件，打包后请求次数大大减少，提升加载速度。
- 代码压缩和混淆： 可以对代码进行压缩（去掉空格、换行等）和混淆（把变量名改成难以理解的字符），减小文件体积，提高安全性。
- 模块化支持： 将ES模块、CommonJS等模块化代码转换成浏览器可以识别的格式。
- 依赖管理： 自动处理模块之间的依赖关系，避免手动引入的麻烦。
1.3 常见的Bundler：Webpack 和 Rollup
前端界最著名的两位“厨师”就是Webpack和Rollup。它们各有千秋，擅长烹饪不同风味的“菜肴”。
- Webpack： 功能强大、配置灵活，像一位全能型大厨，什么菜都能做，但上手难度稍高。适用于大型、复杂的项目。
- Rollup： 专注于ES模块的打包，体积小巧、速度快，像一位擅长制作甜点的糕点师，适合打包库和框架。
| 特性 | Webpack | Rollup |
|---|---|---|
| 定位 | 应用打包器，适用于大型复杂项目 | 库打包器，适用于小型库和框架 |
| 配置 | 复杂，学习曲线陡峭 | 简单，配置较少 |
| 打包结果 | 代码分割、懒加载等特性支持好 | 更纯净的ES模块，更小的体积 |
| 适用场景 | 大型单页应用（SPA）、多页应用（MPA） | 类库、框架、组件库 |
| 生态系统 | 庞大，插件丰富 | 较小，但满足基本需求 |
| Tree Shaking | 支持，但需要配置 | 天然支持，效果更好 |
1.4 Webpack 示例：打包一个简单的React项目
假设我们有一个简单的React项目，目录结构如下：
my-react-app/
├── src/
│ ├── components/
│ │ ├── Button.jsx
│ │ └── Title.jsx
│ ├── App.jsx
│ └── index.js
├── package.json
└── webpack.config.js-
src/components/Button.jsx:import React from 'react'; function Button(props) { return <button>{props.children}</button>; } export default Button; -
src/components/Title.jsx:import React from 'react'; function Title(props) { return <h1>{props.text}</h1>; } export default Title; -
src/App.jsx:import React from 'react'; import Button from './components/Button'; import Title from './components/Title'; function App() { return ( <div> <Title text="Hello, Webpack!" /> <Button>Click Me</Button> </div> ); } export default App; -
src/index.js:import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />); -
webpack.config.js:const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'development', // 设置为 'production' 可以启用代码压缩 entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', }, module: { rules: [ { test: /.jsx?$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env', '@babel/preset-react'], }, }, }, { test: /.css$/i, use: ["style-loader", "css-loader"], }, ], }, resolve: { extensions: ['.js', '.jsx'], }, plugins: [ new HtmlWebpackPlugin({ template: './public/index.html', // 如果有的话，没有就不用写 }), ], devServer: { static: './dist', port: 3000, }, }; -
package.json: (片段，省略了dependencies){ "name": "my-react-app", "version": "1.0.0", "scripts": { "start": "webpack serve --mode development", "build": "webpack --mode production" }, "devDependencies": { "@babel/core": "^7.23.9", "@babel/preset-env": "^7.23.9", "@babel/preset-react": "^7.23.3", "babel-loader": "^9.1.3", "css-loader": "^6.10.0", "html-webpack-plugin": "^5.6.0", "style-loader": "^3.3.4", "webpack": "^5.90.1", "webpack-cli": "^5.1.4", "webpack-dev-server": "^4.15.1" }, "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0" } }
步骤：
- 安装依赖:
npm install --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel/core @babel/preset-env @babel/preset-react css-loader style-loader - 配置Webpack: 创建
webpack.config.js文件，定义入口、出口、loader等。 - 运行打包命令: 在
package.json中配置scripts，运行npm run build(生产环境) 或npm start(开发环境)。
Webpack会根据 webpack.config.js 的配置，将所有模块打包成一个 bundle.js 文件，并输出到 dist 目录下。
1.5 Rollup 示例：打包一个简单的库
假设我们要打包一个简单的工具函数库，目录结构如下：
my-library/
├── src/
│ ├── add.js
│ └── subtract.js
├── package.json
└── rollup.config.js-
src/add.js:export function add(a, b) { return a + b; } -
src/subtract.js:export function subtract(a, b) { return a - b; } -
rollup.config.js:import { terser } from 'rollup-plugin-terser'; export default { input: 'src/index.js', output: [ { file: 'dist/bundle.cjs.js', format: 'cjs', // CommonJS }, { file: 'dist/bundle.esm.js', format: 'es', // ES Module }, { file: 'dist/bundle.umd.js', format: 'umd', // UMD (Universal Module Definition) name: 'MyLibrary', // 库的全局名称 }, ], plugins: [terser()], // 代码压缩 }; -
src/index.js:export { add } from './add'; export { subtract } from './subtract'; -
package.json: (片段，省略了dependencies){ "name": "my-library", "version": "1.0.0", "main": "dist/bundle.cjs.js", "module": "dist/bundle.esm.js", "scripts": { "build": "rollup -c" }, "devDependencies": { "rollup": "^4.12.0", "rollup-plugin-terser": "^7.0.2" } }
步骤：
- 安装依赖:
npm install --save-dev rollup rollup-plugin-terser - 配置Rollup: 创建
rollup.config.js文件，定义入口、出口格式、插件等。 - 运行打包命令: 在
package.json中配置scripts，运行npm run build。
Rollup会将 src/index.js 作为入口，打包成三种格式的文件：bundle.cjs.js (CommonJS)、bundle.esm.js (ES Module) 和 bundle.umd.js (UMD)。
第二节：Tree Shaking（摇树）：只取所需，拒绝浪费
2.1 什么是Tree Shaking？
Tree Shaking是一种“死代码消除”技术，它像一位园丁，通过分析代码的依赖关系，找到项目中未被使用的代码，然后将其从最终的打包结果中移除。就像摇晃一棵树，把枯枝败叶摇下来，只留下健康的枝干。
2.2 为什么要Tree Shaking？
- 减小打包体积： 移除无用代码，减少文件大小，提高加载速度。
- 提升性能： 减少浏览器需要解析和执行的代码量，提升页面性能。
2.3 Tree Shaking的原理
Tree Shaking的实现依赖于ES模块的静态分析能力。ES模块的import和export语句在编译时就可以确定模块之间的依赖关系，这使得Tree Shaking成为可能。
- 静态分析： Bundler（如Webpack、Rollup）在编译时，会分析代码的import和export语句，构建一个模块依赖图。
- 标记： 遍历模块依赖图，标记出所有被使用的模块和变量。
- 删除： 将未被标记的模块和变量从最终的打包结果中移除。
2.4 Tree Shaking的条件
要使Tree Shaking生效，需要满足以下条件：
- 使用ES模块： 必须使用ES模块的
import和export语法。CommonJS模块（require和module.exports）是动态的，无法进行静态分析。 - 代码是纯粹的： 代码应该是“纯粹的”，即函数的输出只依赖于输入，没有副作用。
- 配置Bundler： 需要在Bundler的配置中启用Tree Shaking。
2.5 Webpack中的Tree Shaking
在Webpack中，Tree Shaking的开启方式取决于你使用的Webpack版本和模式。
- Production Mode: 在Webpack 4+中，当
mode设置为production时，Tree Shaking会自动启用。 -
Development Mode: 在开发模式下，Tree Shaking默认是关闭的。如果需要在开发模式下启用Tree Shaking，需要进行额外的配置。
// webpack.config.js module.exports = { mode: 'production', // 或 'development' optimization: { usedExports: true, // 开启标记未使用exports }, };
2.6 Rollup中的Tree Shaking
Rollup对Tree Shaking的支持非常好，默认情况下，Rollup会对ES模块进行Tree Shaking。
2.7 Tree Shaking的注意事项
- 副作用代码： 如果你的代码有副作用（例如修改全局变量、执行DOM操作等），Tree Shaking可能会错误地移除这些代码。
- 动态导入： 动态导入（
import()）的代码不会被Tree Shaking分析。 - CommonJS模块： 尽量避免使用CommonJS模块，因为它会阻碍Tree Shaking。
第三节：package.json 中的 sideEffects 字段：告诉Bundler哪些代码有副作用
3.1 什么是 sideEffects 字段？
sideEffects 是 package.json 文件中的一个字段，用于告诉Bundler（如Webpack）哪些模块具有副作用。
3.2 为什么要使用 sideEffects 字段？
默认情况下，Bundler会假设所有的模块都可能具有副作用，因此会保留所有的模块。如果你的代码中包含一些没有副作用的模块，可以使用 sideEffects 字段来告诉Bundler，从而更好地进行Tree Shaking。
3.3 sideEffects 字段的取值
sideEffects 字段可以是一个布尔值或一个数组。
false： 表示整个包都没有副作用，可以安全地进行Tree Shaking。[]： 和false一样，表示整个包都没有副作用，可以安全地进行Tree Shaking。true(不推荐): 表示整个包都有副作用，不要进行Tree Shaking。Array<string>： 表示只有指定的模块具有副作用，其他的模块可以进行Tree Shaking。数组中的每一项可以是一个文件路径或一个glob模式。
3.4 sideEffects 示例
假设我们有一个工具函数库，目录结构如下：
my-library/
├── src/
│ ├── add.js
│ ├── subtract.js
│ ├── analytics.js // 具有副作用，用于发送统计数据
│ └── style.css // 具有副作用，用于修改DOM样式
├── package.json-
src/add.js:export function add(a, b) { return a + b; } -
src/subtract.js:export function subtract(a, b) { return a - b; } -
src/analytics.js:export function trackEvent(eventName) { // 发送统计数据到服务器 console.log(`Tracking event: ${eventName}`); } trackEvent('library-loaded'); // 立即执行，具有副作用 -
src/style.css:body { background-color: #f0f0f0; } -
package.json:{ "name": "my-library", "version": "1.0.0", "sideEffects": [ "./src/analytics.js", "./src/style.css" ], "main": "dist/bundle.js", "module": "dist/bundle.esm.js" }
在这个例子中，analytics.js 和 style.css 具有副作用，因此我们将它们添加到 sideEffects 数组中。这意味着，即使我们在代码中没有直接使用 analytics.js 和 style.css，Bundler也会保留它们。而 add.js 和 subtract.js 没有副作用，如果它们没有被使用，Bundler会将其移除。
如果整个库都没有副作用，可以这样写：
{
"name": "my-library",
"version": "1.0.0",
"sideEffects": false,
"main": "dist/bundle.js",
"module": "dist/bundle.esm.js"
}或者：
{
"name": "my-library",
"version": "1.0.0",
"sideEffects": [],
"main": "dist/bundle.js",
"module": "dist/bundle.esm.js"
}3.5 sideEffects 的注意事项
- 准确性： 务必确保
sideEffects字段的准确性。如果错误地将没有副作用的模块标记为具有副作用，会导致打包结果变大。反之，如果错误地将具有副作用的模块标记为没有副作用，会导致代码功能异常。 - CSS： 通常情况下，CSS文件都具有副作用，因为它们会修改DOM的样式。因此，建议将CSS文件添加到
sideEffects数组中。 - 全局变量修改： 如果你的代码修改了全局变量，那么它也具有副作用。
- 立即执行函数： 如果你的代码包含立即执行函数，并且这些函数会产生副作用，那么包含这些函数的模块也具有副作用。
总结：代码瘦身，永无止境
今天的讲座到此结束。我们学习了JavaScript打包、Tree Shaking以及package.json中的sideEffects字段。希望大家能够灵活运用这些技术，让我们的代码变得更苗条、更高效！记住，代码瘦身，永无止境，让我们一起努力，打造更优质的前端应用！
最后，给大家留一个小作业：尝试在你自己的项目中应用Tree Shaking和sideEffects字段，看看能减少多少打包体积。祝大家学习愉快！