Vite 按功能目录打包：用户中心、订单中心分离
可以使用 Vite 的代码拆分功能来实现按照不同的功能目录进行打包。
首先，将各个功能目录单独分为不同的入口文件，例如用户中心为一个入口文件，订单中心为一个入口文件。
然后，在 Vite 配置文件中使用代码拆分的方式，将每个入口文件所依赖的代码进行分离打包，生成对应的代码块。
最后，在生成的 HTML 页面中，按照需要引入对应的代码块即可实现按照不同的功能目录进行打包。
示例：
假设有以下目录结构：
src
├── userCenter
│ ├── index.js
│ ├── ...
└── orderCenter
├── index.js
├── ...
在 vite.config.js 文件中，可以这样配置：
import { defineConfig } from 'vite';
export default defineConfig({
build: {
rollupOptions: {
input: {
userCenter: './src/userCenter/index.js',
orderCenter: './src/orderCenter/index.js'
},
output: {
chunkFileNames: '[name].js'
}
}
}
});
这里使用了 rollupOptions 配置，将 userCenter 和 orderCenter 的代码分别打包到对应的代码块中。
最后，在 HTML 页面中按照需要引入对应的代码块即可：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>My App</title>
</head>
<body>
<div id='userCenter'></div>
<script src='userCenter.js'></script>
</body>
</html>
这样，只有 userCenter 的代码及依赖会被打包到 userCenter.js 中，而 orderCenter 的代码不会被打包。
原文地址: https://www.cveoy.top/t/topic/oSbc 著作权归作者所有。请勿转载和采集!