Vite配置優(yōu)雅的code?spliiting代碼分割詳解
Vite如何配置分割代碼
1.什么是代碼分割/code spliiting
前端生態(tài) rollup 和 webpack都有的概念。 如果把所有代碼都打包到一起,可能最終的代碼非常大。從而影響加載時(shí)間。
而且,很多代碼是初始加載時(shí),不需要的。因此,我們可以根據(jù)代碼使用的緊急程度,將代碼分割打包后,可以按需加載。
2.Vite 中 rollup code spliiting分割默認(rèn)方法原理
rollup code-spliiting代碼分割 默認(rèn)是由es6 esm(ECMAScript Module)的import, export js模塊化功能實(shí)現(xiàn)的,CommonJS標(biāo)準(zhǔn)無(wú)法實(shí)現(xiàn)。
// 提前安裝rollup npm i -g rollup
案例 目錄
├─dist
└─src
foo.js
main.js
main1.js
(1)按照動(dòng)態(tài)導(dǎo)入語(yǔ)句分割打包測(cè)試。
//// foo.js
export default 'hello foo!';
// main.js文件
// 動(dòng)態(tài)導(dǎo)入案例1
export default function () {
import('./foo.js')
.then(() => {
// console.log(導(dǎo)入成功);
})
.catch(() => {});
}
執(zhí)行 rollup src/main.js -f cjs -d dist
打包/main.js 生成兩個(gè)文件

打包后的代碼展示
// dist\foo-xxxxxx.js
'use strict';
var foo = 'hello foo!';
exports["default"] = foo;
// dist\main.js
'use strict';
// 動(dòng)態(tài)導(dǎo)入案例1
function main () {
Promise.resolve().then(function () { return require('./foo-e385385a.js'); })
.then(() => {
// console.log(導(dǎo)入成功);
})
.catch(() => {});
}
module.exports = main;
按照動(dòng)態(tài)導(dǎo)入語(yǔ)句分割打包測(cè)試驗(yàn)證成功。
(2)按照資源導(dǎo)入入口點(diǎn)分割打包測(cè)試。
// foo.js export default 'hello foo!';
// main.js文件
// 資源靜態(tài)導(dǎo)入案例1
import foo from './foo.js';
export default function () {
console.log(foo);
}
// main1.js文件
// 資源靜態(tài)導(dǎo)入案例2
import foo from './foo.js';
export default function () {
console.log(foo);
}
執(zhí)行 rollup src/main.js src/main1.js -f cjs -d dist
打包/main.js和/main1.js文件 生成三個(gè)文件

打包后的代碼展示
// dist\foo-xxxx.js
'use strict';
var foo = 'hello foo!';
exports.foo = foo;
// dist\main.js
'use strict';
var foo = require('./foo-f41bffe6.js');
// 靜態(tài)導(dǎo)入案例
function main () {
console.log(foo.foo);
}
module.exports = main;
// dist\main1.js
'use strict';
var foo = require('./foo-f41bffe6.js');
function main1 () {
console.log(foo.foo);
}
module.exports = main1;
按照資源導(dǎo)入入口點(diǎn)分割打包測(cè)試驗(yàn)證成功。
(3)manualChunks函數(shù) 手動(dòng)自定義分割。(下面的案例)
3.如何在Vite中配置(vite.config.ts)代碼分割/code spliiting (核心關(guān)鍵)
Vite代碼分割方法1
// vite.config.ts
build: {
// rollup 配置
rollupOptions: {
output: {
// key自定義 value[] 插件同步package.json名稱(chēng) 或 src/相對(duì)路徑下的指定文件 (自己可以看manualChunks ts類(lèi)型)
manualChunks: {
// vue vue-router合并打包
vue: ['vue', 'vue-router'],
echarts: ['echarts'],
lodash: ['lodash'],
// 兩個(gè)文件合并成一個(gè)helloWorld文件
helloWorld: ['src/components/HelloWorld.vue','src/components/HelloWorld1.vue'],
...
}
}
}
}
Vite代碼分割方法2
// vite.config.ts
build: {
// rollup 配置
rollupOptions: {
output: {
manualChunks(id: any): string {
if (id.includes("style.css")) {
// 需要單獨(dú)分割那些資源 就寫(xiě)判斷邏輯就行
return 'src/style.css';
}
if (id.includes("HelloWorld.vue")) {
// 單獨(dú)分割hello world.vue文件
return 'src/components/HelloWorld.vue';
}
// // 最小化拆分包
if (id.includes("node_modules")) {
return id
.toString()
.split("node_modules/")[1]
.split("/")[0]
.toString();
}
}
}
}
}以上就是Vite配置優(yōu)雅的code spliiting代碼分割詳解的詳細(xì)內(nèi)容,更多關(guān)于Vite配置code spliiting的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue項(xiàng)目實(shí)現(xiàn)m3u8流媒體播放詳細(xì)圖文教程
m3u8是一種常用的視頻流媒體格式,通常用于在Web上播放視頻,這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目實(shí)現(xiàn)m3u8流媒體播放的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
Vue實(shí)現(xiàn)Echarts圖表寬高自適應(yīng)的實(shí)踐
本文主要介紹了Vue實(shí)現(xiàn)Echarts圖表寬高自適應(yīng)的實(shí)踐,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-11-11
vue使用vuex實(shí)現(xiàn)首頁(yè)導(dǎo)航切換不同路由的方法
這篇文章主要介紹了vue使用vuex實(shí)現(xiàn)首頁(yè)導(dǎo)航切換不同路由的方法 ,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
vue實(shí)現(xiàn)彈窗引用另一個(gè)頁(yè)面窗口
這篇文章主要介紹了vue實(shí)現(xiàn)彈窗引用另一個(gè)頁(yè)面窗口,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04
Vue將將后端返回的list數(shù)據(jù)轉(zhuǎn)化為樹(shù)結(jié)構(gòu)的實(shí)現(xiàn)
本文主要介紹了Vue將將后端返回的list數(shù)據(jù)轉(zhuǎn)化為樹(shù)結(jié)構(gòu)的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
Vue2.0實(shí)現(xiàn)簡(jiǎn)單分頁(yè)及跳轉(zhuǎn)效果
這篇文章主要為大家詳細(xì)介紹了Vue2.0實(shí)現(xiàn)簡(jiǎn)單數(shù)據(jù)分頁(yè),及頁(yè)數(shù)的跳轉(zhuǎn)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07
100行代碼實(shí)現(xiàn)一個(gè)vue分頁(yè)組功能
今天用vue來(lái)實(shí)現(xiàn)一個(gè)分頁(yè)組件,總體來(lái)說(shuō),vue實(shí)現(xiàn)比較簡(jiǎn)單,樣式部分模仿了elementUI。接下來(lái)本文通過(guò)實(shí)例代碼給大家介紹100行代碼實(shí)現(xiàn)一個(gè)vue分頁(yè)組功能,感興趣的朋友跟隨小編一起看看吧2018-11-11
vue如何使用watch監(jiān)聽(tīng)指定數(shù)據(jù)的變化
這篇文章主要介紹了vue如何使用watch監(jiān)聽(tīng)指定數(shù)據(jù)的變化,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04
Vue3組件掛載之創(chuàng)建組件實(shí)例詳解
這篇文章主要為大家介紹了Vue3組件掛載之創(chuàng)建組件實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10

