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