module 和 chunk 和 bundle 是什么？
- module（模块）是你写的原始源代码文件，比如一个 .js 文件、一个 .css 文件或一张图片，是构成一切的基础
- chunk（代码块）是构建工具（如 Webpack、Vite 等）在打包过程中生成的代码片段集合，是实现 “代码分割（code splitting）” 的核心概念。它的本质是将项目代码拆分成多个独立的、可按需加载的部分，以优化页面加载性能。
- bundle（捆绑包）是最终输出到浏览器的完整文件（如 app.js、vendor.js），通常由一个或多个 chunk 组成。
作用
- 优化加载性能：将代码拆分成多个 chunk 后，可实现 “按需加载”（如首屏只加载必要代码，其他代码在需要时再请求），减少初始加载时间。
- 缓存复用：第三方库（vendors chunk）通常更新频率低，拆分后可独立缓存，用户再次访问时无需重新下载。
- 并行加载：浏览器可并行请求多个 chunk，提升加载效率。
示例
// 1. 同步代码（会被打包到入口 chunk）
import './utils';
// 2. 动态导入（会生成独立的异步 chunk）
button.addEventListener('click', () => {
// 点击时才加载 modal 组件的代码
import('./modal').then(({ openModal }) => {
openModal();
});
});
//构建后会生成：
//入口 chunk：main.xxx.js（包含同步代码）
//异步 chunk：modal.xxx.js（点击时才加载）
// React中的路由懒加载
const About = React.lazy(() => import('./routes/About'));
Webpack 多入口配置
- 定义多个入口点
module.exports = {
entry: {
index: './src/pages/index/index.js', // 对应首页
login: './src/pages/login/login.js' // 对应登录页
}
};
- 配置输出以区分文件
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].bundle.js' // 输出为 index.bundle.js, login.bundle.js
}
- 为每个入口生成 HTML
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin({
template: './src/pages/index/index.html',
filename: 'index.html',
chunks: ['index'] // 只包含index.bundle.js
}),
new HtmlWebpackPlugin({
template: './src/pages/login/login.html',
filename: 'login.html',
chunks: ['login'] // 只包含login.bundle.js
})
]
};
评论区