vite打包拆分js和css的配置指南
最近开发了一个h5的系统,用的是vite + vue3 + ts 开发的,
打包之后发现vite会将所有的js和css文件都打在一个文件夹下,assets目录,
所以 我总结了一份拆分js和css的配置,将js和css分别打在不同目录下
配置如下:
build: { chunkSizeWarningLimit: 1500, rollupOptions: { output: { // 最小化拆分包 manualChunks(id) { if (id.includes("node_modules")) { return id.toString().split("node_modules/")[1].split("/")[0].toString() } }, // 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值 entryFileNames: 'js/[name].[hash].js', // 用于命名代码拆分时创建的共享块的输出命名 // chunkFileNames: 'js/[name].[hash].js', // 用于输出静态资源的命名,[ext]表示文件扩展名 assetFileNames: '[ext]/[name].[hash].[ext]', // 拆分js到模块文件夹 chunkFileNames: (chunkInfo) => { const facadeModuleId = chunkInfo.facadeModuleId ? chunkInfo.facadeModuleId.split('/') : []; const fileName = facadeModuleId[facadeModuleId.length - 2] || '[name]'; return `js/${fileName}/[name].[hash].js`; }, } } }
在vite.config.js文件里添加build属性就好了,
打完之后就是这个样子
亲测可用!!!
总结
到此这篇关于vite打包拆分js和css的文章就介绍到这了,更多相关vite打包拆分js和css内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Vue中灵活拖拽的前端神器VueDraggablePlus的用法详解
这篇文章主要介绍了一款功能强大、灵活易用的前端组件VueDraggablePlus,作为前端工程师,我们经常会遇到需要实现拖拽功能的场景,而VueDraggablePlus正是为了解决这一痛点而诞生的,让我们一起来看看它的特点和用法吧2024-03-03Vue实现Hover功能(mouseover与mouseenter的区别及说明)
这篇文章主要介绍了Vue实现Hover功能(mouseover与mouseenter的区别及说明),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-10-10vue3+elementui-plus实现一个接口上传多个文件功能
这篇文章主要介绍了vue3+elementui-plus实现一个接口上传多个文件,先使用element-plus写好上传组件,然后假设有个提交按钮,点击上传文件请求接口,本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下2023-07-07
最新评论