Vite配置優雅的code spliiting代碼分割詳解

Posted on by

Vite如何配置分割代碼

1.什麼是代碼分割/code spliiting

前端生態 rollup 和 webpack都有的概念。 如果把所有代碼都打包到一起，可能最終的代碼非常大。從而影響加載時間。

而且，很多代碼是初始加載時，不需要的。因此，我們可以根據代碼使用的緊急程度，將代碼分割打包後，可以按需加載。

2.Vite 中 rollup code spliiting分割默認方法原理

rollup code-spliiting代碼分割 默認是由es6 esm(ECMAScript Module)的import, export js模塊化功能實現的，CommonJS標準無法實現。

// 提前安裝rollup
npm i -g rollup

案例 目錄

├─dist
└─src
        foo.js
        main.js
        main1.js

（1）按照動態導入語句分割打包測試。

//// foo.js
export default 'hello foo!';
// main.js文件
// 動態導入案例1
export default function () {
    import('./foo.js')
    .then(() => {
        // console.log(導入成功);
    })
    .catch(() => {});
}

執行 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';
// 動態導入案例1
function main () {
    Promise.resolve().then(function () { return require('./foo-e385385a.js'); })
    .then(() => {
        // console.log(導入成功);
    })
    .catch(() => {});
}
module.exports = main;

按照動態導入語句分割打包測試驗證成功。

（2）按照資源導入入口點分割打包測試。

// foo.js
export default 'hello foo!';

// main.js文件
// 資源靜態導入案例1
import foo from './foo.js';
export default function () {
    console.log(foo);
}
// main1.js文件
// 資源靜態導入案例2
import foo from './foo.js';
export default function () {
    console.log(foo);
}

執行 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');
// 靜態導入案例
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;

按照資源導入入口點分割打包測試驗證成功。

（3）manualChunks函數 手動自定義分割。（下面的案例）

3.如何在Vite中配置（vite.config.ts）代碼分割/code spliiting （核心關鍵）

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配置優雅的code spliiting代碼分割詳解的詳細內容，更多關於Vite配置code spliiting的資料請關註WalkonNet其它相關文章！

推薦閱讀：