vite 分包配置 一、默认打包结果 二、配置 node_modules 打到一个文件 结果 配置 // vite.config.jsexportdefaultdefineConfig(({ mode }:ConfigEnv):UserConfig=>{constroot = process.cwd()// 项目根目录(index.html 文件所在的位置)constenv =loadEnv(mode, root)// 加载 envDir 中的 .env 文件 只有...
配置分包:在vite.config.js中配置manualChunks,将第三方依赖单独打包成vendor.js,将业务代码按页面或模块进行打包。 使用动态导入:对于非首页的页面或大型组件,使用动态导入来实现按需加载。 测试和优化:在开发过程中不断测试应用的加载性能,并根据测试结果调整分包策略。 四、总结 分包策略是前端性能优化的重要手段之一...
2.实现方法 2.1 将依赖包独立打包 可以使用 exportdefaultdefineConfig({build:{rollupOptions:{output:{manualChunks(id){console.info(id);if(id.includes('node_modules')){return"vendor"; } } } } } }) 这个代码的作用是,如果是依赖包,则打包到vendor-**.js 文件中。 2.2 指定依赖包打包 export defa...
console.info(id); if(id.includes('node_modules')){ return "vendor"; } } } } }) 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 这个代码的作用是,如果是依赖包,则打包到vendor-**.js 文件中。 2.2 指定依赖包打包 export default defineConfig({ build:{ rollupOptions:{ manualChunks()...
split('node_modules/')[1].split('/')[0].toString(); } } } } } }); 在这个配置中,manualChunks函数用于自定义模块的打包策略。如果模块ID包含node_modules,则将其打包到对应的包中。 3. 执行Vite分包打包命令 要打包Vite项目,只需运行以下命令: bash npm run build 或者,如果您使用的是Yarn: ...
defineConfig }from"vite";exportdefaultdefineConfig({build:{minify:false,// 在这里配置打包时的rollup配置rollupOptions:{manualChunks:(id) =>{if(id.includes('node_modules')) {return'vendor'; } } } } }); 重新打包后,可以发现分包策略已经实现了。
vendor包分包的策略是:模块id名是包含'node_modules'的,表示该模块是在node_modules下的,且这个模块不是css模块,且这个模块是被静态入口点模块(单页应用的index.html,多页应用下可以有多个)导入的 小结:用户配置了手动分包,就会忽略vite提供的vendor分包逻辑。
手动控制分包:你可以在 vite.config.js 中使用 build.rollupOptions 来手动控制分包策略。例如:```javascript defineConfig({ build: { rollupOptions: { output: { if (id.includes('node_modules')) { return 'vendor'; } } } } }); ``` 分包策略:Vite 允许你对不同类型的文件及其引用方式进行详细配...
但是这里的问题是,每次打包后的内容大部分都是 lodash 库的内容,它的内容是不会变化的(node_modules 中的代码都是不会变化的),我们只是更改了业务代码而已,会导致每次浏览器请求的文件都很大,很大的网络传输损耗。 分包策略就是为了解决这个问题,它会将一些不常规更新变化的文件进行单独打包处理。
vite使用了分包 rollupOptions: { manualChunks(id) { if (id.includes('node_modules')) { return 'vendor'; } }, }, 会多出一个vendor.xxx.js 以及 vendor.xxx.css; 然后再注入到index.html的时候,会先导入vendor.xxx.css 然后再注入index.xxx.css,这就导致了第三方库的一些样式被后面的index.xxx....