通过合理配置Rollup,我们可以将项目中不会频繁更新的依赖(如第三方库)单独打包,而将经常变动的业务代码打包成另一个包,从而优化缓存利用,减少不必要的资源加载。 二、实现分包策略 在Vite项目中,实现分包策略主要依赖于vite.config.js文件中的build.rollupOptions.output.manualChunks配置。以下是一些实现分包策略的具体...
分包策略:Vite 允许你对不同类型的文件及其引用方式进行详细配置,从而优化分包。你可以使用 Vite 的 build.commonjsOptions 和 build.lib 进行细粒度的控制。 Vite的优势 🌟Vite 的配置相对简单,并且自动支持按需加载和 ES 模块的拆分。基于 Rollup 的插件生态,具有良好的分包性能和灵活性。总结来说,Vite 适合中小...
在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。在稍微大一点的项目中,由于文件之间的依赖关系非常复杂,这种依赖关系会随着大量小文...
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 文件中。
接着我们来配置分包,修改底层的 Rollup 配置: // vite.config.js import { defineConfig } from 'vite' export default defineConfig({ build: { rollupOptions: { output: { manualChunks: id => { // 将 node_modules 中的代码单独打包成一个 JS 文件 if(id.includes('node_modules')) { return '...