Vite配置優(yōu)雅的code?spliiting代碼分割詳解
更新時間：2022年08月29日 15:12:32 作者：天渺工作室
這篇文章主要為大家介紹了Vite配置優(yōu)雅的code?spliiting代碼分割詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
Vite如何配置分割代碼
1.什么是代碼分割/code spliiting
前端生態(tài) rollup 和 webpack都有的概念。 如果把所有代碼都打包到一起，可能最終的代碼非常大。從而影響加載時間。
而且，很多代碼是初始加載時，不需要的。因此，我們可以根據(jù)代碼使用的緊急程度，將代碼分割打包后，可以按需加載。
2.Vite 中 rollup code spliiting分割默認(rèn)方法原理
rollup code-spliiting代碼分割 默認(rèn)是由es6 esm(ECMAScript Module)的import, export js模塊化功能實現(xiàn)的，CommonJS標(biāo)準(zhǔn)無法實現(xiàn)。
// 提前安裝rollup npm i -g rollup
案例 目錄
├─dist
└─src
foo.js
main.js
main1.js
（1）按照動態(tài)導(dǎo)入語句分割打包測試。
//// foo.js
export default 'hello foo!';
// main.js文件
// 動態(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 生成兩個文件
打包后的代碼展示
// dist\foo-xxxxxx.js
'use strict';
var foo = 'hello foo!';
exports["default"] = foo;
// dist\main.js
'use strict';
// 動態(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;
按照動態(tài)導(dǎo)入語句分割打包測試驗證成功。
（2）按照資源導(dǎo)入入口點分割打包測試。
// 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文件 生成三個文件
打包后的代碼展示
// 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)入入口點分割打包測試驗證成功。
（3）manualChunks函數(shù) 手動自定義分割。（下面的案例）
3.如何在Vite中配置（vite.config.ts）代碼分割/code spliiting （核心關(guān)鍵）
Vite代碼分割方法1
// vite.config.ts
build: {
// rollup 配置
rollupOptions: {
output: {
// key自定義 value[] 插件同步package.json名稱 或 src/相對路徑下的指定文件 （自己可以看manualChunks ts類型）
manualChunks: {
// vue vue-router合并打包
vue: ['vue', 'vue-router'],
echarts: ['echarts'],
lodash: ['lodash'],
// 兩個文件合并成一個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")) {
// 需要單獨分割那些資源 就寫判斷邏輯就行
return 'src/style.css';
}
if (id.includes("HelloWorld.vue")) {
// 單獨分割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的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue項目實現(xiàn)m3u8流媒體播放詳細(xì)圖文教程
m3u8是一種常用的視頻流媒體格式,通常用于在Web上播放視頻,這篇文章主要給大家介紹了關(guān)于vue項目實現(xiàn)m3u8流媒體播放的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
Vue實現(xiàn)Echarts圖表寬高自適應(yīng)的實踐
本文主要介紹了Vue實現(xiàn)Echarts圖表寬高自適應(yīng)的實踐，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
vue使用vuex實現(xiàn)首頁導(dǎo)航切換不同路由的方法
這篇文章主要介紹了vue使用vuex實現(xiàn)首頁導(dǎo)航切換不同路由的方法 ,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
這篇文章主要介紹了vue實現(xiàn)彈窗引用另一個頁面窗口，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue將將后端返回的list數(shù)據(jù)轉(zhuǎn)化為樹結(jié)構(gòu)的實現(xiàn)
本文主要介紹了Vue將將后端返回的list數(shù)據(jù)轉(zhuǎn)化為樹結(jié)構(gòu)的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
Vue2.0實現(xiàn)簡單分頁及跳轉(zhuǎn)效果
這篇文章主要為大家詳細(xì)介紹了Vue2.0實現(xiàn)簡單數(shù)據(jù)分頁，及頁數(shù)的跳轉(zhuǎn)效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
今天用vue來實現(xiàn)一個分頁組件，總體來說，vue實現(xiàn)比較簡單，樣式部分模仿了elementUI。接下來本文通過實例代碼給大家介紹100行代碼實現(xiàn)一個vue分頁組功能，感興趣的朋友跟隨小編一起看看吧2018-11-11
本文主要介紹了Vue3怎么使用element-plus，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
vue如何使用watch監(jiān)聽指定數(shù)據(jù)的變化
這篇文章主要介紹了vue如何使用watch監(jiān)聽指定數(shù)據(jù)的變化，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家介紹了Vue3組件掛載之創(chuàng)建組件實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10