通过合理配置Rollup,我们可以将项目中不会频繁更新的依赖(如第三方库)单独打包,而将经常变动的业务代码打包成另一个包,从而优化缓存利用,减少不必要的资源加载。 二、实现分包策略 在Vite项目中,实现分包策略主要依赖于vite.config.js文件中的build.rollupOptions.output.manualChunks配置。以下是一些实现分包策略的具体...
在Vite中实现分模块打包主要依赖于Vite的配置文件(vite.config.ts 或vite.config.js)中的build和rollupOptions选项。以下是几个关键步骤和配置,帮助你在Vite项目中实现分模块打包: 1. 配置build选项 首先,确保你的vite.config.ts或vite.config.js文件中包含了基本的构建配置。对于分模块打包,你可能需要调整outDir(输...
我们还需要通过rollupOptions.output.manualChunks定制拆包配置,从而确保模块内部的代码统一打包到一起,避免出现碎片化文件。 const__ModuleLibs=[/src\/module\/([^\/]*?)\//,/src\/module-vendor\/([^\/]*?)\//,/src\/suite\/.*\/modules\/([^\/]*?)\//,/src\/suite-vendor\/.*\/modules\/...
前面提到使用rollupOptions.output.manualChunks定制分包策略有两种隐患,这里展开说明一下: 1. 导致初始包体积过大 如图所示,文件 A 本来只依赖文件 C,但是按照图中所示分包配置,导致在使用文件 A 之前必须先下载 Chunk1 和 Chunk2。在稍微大一点的项目中,由于文件之间的依赖关系非常复杂,这种依赖关系会随着大量小文...
手动控制分包:你可以在 vite.config.js 中使用 build.rollupOptions 来手动控制分包策略。例如:```javascript defineConfig({ build: { rollupOptions: { output: { if (id.includes('node_modules')) { return 'vendor'; } } } } }); ``` 分包策略:Vite 允许你对不同类型的文件及其引用方式进行详细配...
exportdefaultdefineConfig({build:{rollupOptions:{output:{manualChunks(id){console.info(id);if(id.includes('node_modules')){return"vendor"; } } } } } }) 这个代码的作用是,如果是依赖包,则打包到vendor-**.js 文件中。 2.2 指定依赖包打包 ...
vite.config.js 分包配置如下,备注写明字段用途,其中[name] 、[hash] 、[ext]是 rollup 中的展位符。 import { defineConfig } from "vite";import vue from "@vitejs/plugin-vue";export default defineConfig({plugins: [vue()],build: {// 配置 rollup 选项rollupOptions: {// 影响打包输出结果output...
在vite配置文件,通过build.rollupOptions.output.manualChunks配合手动分包策略之后,vite不会自动生成vendor包 当页面越来越多,配置了动态引入页面之后,打包出来会产生chunk碎片,如几个页面公用的文件api.jssdkUtils.jshttp.js等,这些独立的分包大小都很小,加起来gzip之后都不到1kb,增加了网络请求。
rollupOptions:{ manualChunks(id){ console.info(id); if(id.includes('node_modules')){ return "vendor"; } } } } }) 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 这个代码的作用是,如果是依赖包,则打包到vendor-**.js 文件中。
{constroot = process.cwd()// 项目根目录(index.html 文件所在的位置)constenv =loadEnv(mode, root)// 加载 envDir 中的 .env 文件 只有前缀为 VITE_ 会被加载constviteEnv =wrapperEnv(env)return{base:'./',build: {rollupOptions: {output: {manualChunks:(id) =>{if(id.includes('node_modules...