vite打包拆分js和css的配置指南
更新時間：2023年09月17日 09:00:44 作者：還有多遠.
這篇文章主要給大家介紹了關(guān)于vite打包拆分js和css的配置指南,Vite是一個非常快速的工具,它可以幫助你打包JavaScript文件,需要的朋友可以參考下
最近開發(fā)了一個h5的系統(tǒng)，用的是vite + vue3 + ts 開發(fā)的，
打包之后發(fā)現(xiàn)vite會將所有的js和css文件都打在一個文件夾下，assets目錄，
所以 我總結(jié)了一份拆分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()
}
},
// 用于從入口點創(chuàng)建的塊的打包輸出格式[name]表示文件名,[hash]表示該文件內(nèi)容hash值
entryFileNames: 'js/[name].[hash].js',
// 用于命名代碼拆分時創(chuàng)建的共享塊的輸出命名
// chunkFileNames: 'js/[name].[hash].js',
// 用于輸出靜態(tài)資源的命名，[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屬性就好了，
打完之后就是這個樣子
親測可用?。?！
總結(jié)
到此這篇關(guān)于vite打包拆分js和css的文章就介紹到這了,更多相關(guān)vite打包拆分js和css內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue 動態(tài)路由的實現(xiàn)及 Springsecurity 按鈕級別的權(quán)限控制
這篇文章主要介紹了Vue 動態(tài)路由的實現(xiàn)以及 Springsecurity 按鈕級別的權(quán)限控制的相關(guān)知識，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
Electron+vue3項目使用SQLite3數(shù)據(jù)庫詳細步驟(超詳細)
Electron是一個基于vue.js的新框架,它可以構(gòu)建桌面應用,這篇文章主要給大家介紹了關(guān)于Electron+vue3項目使用SQLite3數(shù)據(jù)庫的詳細步驟,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-01-01
VueX學習之modules和namespacedVueX詳細教程
這篇文章主要為大家介紹了VueX學習之modules和namespacedVueX詳細教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
本文主要介紹了Vue中如何運用TS語法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-02-02
這篇文章主要介紹了使用vue如何構(gòu)建一個自動建站項目，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了詳解vue 自定義組件使用v-model 及探究其中原理，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
vue項目中監(jiān)聽手機物理返回鍵的實現(xiàn)
這篇文章主要介紹了vue項目中監(jiān)聽手機物理返回鍵的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01
在絕大多數(shù)情況下,Vue 推薦使用模板語法來創(chuàng)建應用,然而在某些使用場景下,我們真的需要用到 JavaScript 完全的編程能力,這時JSX或渲染函數(shù)就派上用場了,下面就來介紹一下如何使用2026-02-02
這篇文章主要介紹了vue 中的 render 函數(shù)作用，通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了vue組件之全局注冊和局部注冊方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03