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