Vite打包分割代碼的詳細(xì)過(guò)程記錄
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(); } } } } }
總結(jié)
到此這篇關(guān)于Vite打包分割代碼的文章就介紹到這了,更多相關(guān)Vite打包分割代碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
解決vue中使用less/sass及使用中遇到無(wú)效的問(wèn)題
這篇文章主要介紹了解決vue中使用less/sass及使用中遇到無(wú)效的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10Antd-vue Table組件添加Click事件,實(shí)現(xiàn)點(diǎn)擊某行數(shù)據(jù)教程
這篇文章主要介紹了Antd-vue Table組件添加Click事件,實(shí)現(xiàn)點(diǎn)擊某行數(shù)據(jù)教程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11vue toggle做一個(gè)點(diǎn)擊切換class(實(shí)例講解)
下面小編就為大家分享一篇使用vue toggle實(shí)現(xiàn)點(diǎn)擊切換class的示例。具有很好的參考價(jià)值。希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03淺談vue中g(shù)et請(qǐng)求解決傳輸數(shù)據(jù)是數(shù)組格式的問(wèn)題
這篇文章主要介紹了淺談vue中g(shù)et請(qǐng)求解決傳輸數(shù)據(jù)是數(shù)組格式的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08vue3引入highlight.js進(jìn)行代碼高亮的方法實(shí)例
最近忙著開(kāi)發(fā)自己的開(kāi)發(fā)腳手架,在做代碼生成器的時(shí)候,有個(gè)預(yù)覽功能,需要讓代碼高亮,下面這篇文章主要給大家介紹了關(guān)于vue3引入highlight.js進(jìn)行代碼高亮的相關(guān)資料,需要的朋友可以參考下2022-04-04Vue+FormData+axios實(shí)現(xiàn)圖片上傳功能
這篇文章主要為大家學(xué)習(xí)介紹了Vue如何利用FormData和axios實(shí)現(xiàn)圖片上傳功能,本文為大家整理了詳細(xì)步驟,感興趣的小伙伴可以了解一下2023-08-08Vue組件通信$attrs、$listeners實(shí)現(xiàn)原理解析
這篇文章主要介紹了Vue組件通信$attrs、$listeners實(shí)現(xiàn)原理解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09