欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vite打包分割代碼的詳細(xì)過程記錄

 更新時間:2022年09月08日 09:18:51   作者:天渺工作室  
項目創(chuàng)建Vite是一個web開發(fā)構(gòu)建工具,由于其原生ES模塊導(dǎo)入方法,它允許快速提供代碼,下面這篇文章主要給大家介紹了關(guān)于Vite打包分割代碼的相關(guān)資料,需要的朋友可以參考下

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)文章

  • Vue3中導(dǎo)航守衛(wèi)的基本使用方法

    Vue3中導(dǎo)航守衛(wèi)的基本使用方法

    這篇文章主要給大家介紹了關(guān)于Vue3中導(dǎo)航守衛(wèi)的基本使用方法,正如其名vue-router?提供的導(dǎo)航守衛(wèi)主要用來通過跳轉(zhuǎn)或取消的方式守衛(wèi)導(dǎo)航,下面需要的朋友可以參考下
    2023-03-03
  • 解決vue中使用less/sass及使用中遇到無效的問題

    解決vue中使用less/sass及使用中遇到無效的問題

    這篇文章主要介紹了解決vue中使用less/sass及使用中遇到無效的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-10-10
  • Antd-vue Table組件添加Click事件,實現(xiàn)點擊某行數(shù)據(jù)教程

    Antd-vue Table組件添加Click事件,實現(xiàn)點擊某行數(shù)據(jù)教程

    這篇文章主要介紹了Antd-vue Table組件添加Click事件,實現(xiàn)點擊某行數(shù)據(jù)教程,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • vue toggle做一個點擊切換class(實例講解)

    vue toggle做一個點擊切換class(實例講解)

    下面小編就為大家分享一篇使用vue toggle實現(xiàn)點擊切換class的示例。具有很好的參考價值。希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • 淺談vue中g(shù)et請求解決傳輸數(shù)據(jù)是數(shù)組格式的問題

    淺談vue中g(shù)et請求解決傳輸數(shù)據(jù)是數(shù)組格式的問題

    這篇文章主要介紹了淺談vue中g(shù)et請求解決傳輸數(shù)據(jù)是數(shù)組格式的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • 詳解Vue之事件處理

    詳解Vue之事件處理

    這篇文章主要介紹了Vue之事件處理的相關(guān)資料,文中示例代碼非常詳細(xì),幫助大家更好的理解和學(xué)習(xí),感興趣的朋友可以了解下。
    2020-07-07
  • 解決vue里碰到 $refs 的問題的方法

    解決vue里碰到 $refs 的問題的方法

    本篇文章主要介紹了解決vue里碰到 $refs 的問題的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-07-07
  • vue3引入highlight.js進(jìn)行代碼高亮的方法實例

    vue3引入highlight.js進(jìn)行代碼高亮的方法實例

    最近忙著開發(fā)自己的開發(fā)腳手架,在做代碼生成器的時候,有個預(yù)覽功能,需要讓代碼高亮,下面這篇文章主要給大家介紹了關(guān)于vue3引入highlight.js進(jìn)行代碼高亮的相關(guān)資料,需要的朋友可以參考下
    2022-04-04
  • Vue+FormData+axios實現(xiàn)圖片上傳功能

    Vue+FormData+axios實現(xiàn)圖片上傳功能

    這篇文章主要為大家學(xué)習(xí)介紹了Vue如何利用FormData和axios實現(xiàn)圖片上傳功能,本文為大家整理了詳細(xì)步驟,感興趣的小伙伴可以了解一下
    2023-08-08
  • Vue組件通信$attrs、$listeners實現(xiàn)原理解析

    Vue組件通信$attrs、$listeners實現(xiàn)原理解析

    這篇文章主要介紹了Vue組件通信$attrs、$listeners實現(xiàn)原理解析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2020-09-09

最新評論