位置：首页-资讯-前端开发

Vite打包分割代码的详细过程记录

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

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
└─class="lazy" data-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 class="lazy" data-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 class="lazy" data-src/main.js class="lazy" data-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名称 或 class="lazy" data-src/相对路径下的指定文件 （自己可以看manualChunks ts类型）
            manualChunks: {
                // vue vue-router合并打包
                vue: ['vue', 'vue-router'],
                echarts: ['echarts'],
                lodash: ['lodash'],
                // 两个文件合并成一个helloWorld文件
                helloWorld: ['class="lazy" data-src/components/HelloWorld.vue','class="lazy" data-src/components/HelloWorld1.vue'],
                ...
            }
        }
    }
}

Vite代码分割方法2

// vite.config.ts
build: {
    // rollup 配置
    rollupOptions: {
        output: {
            manualChunks(id: any): string {
                if (id.includes("style.css")) {
                    // 需要单独分割那些资源 就写判断逻辑就行
                    return 'class="lazy" data-src/style.css';
		}
                if (id.includes("HelloWorld.vue")) {
                    // 单独分割hello world.vue文件
                    return 'class="lazy" data-src/components/HelloWorld.vue';
		}
                // // 最小化拆分包
                if (id.includes("node_modules")) {
                    return id
                            .toString()
                            .split("node_modules/")[1]
                            .split("/")[0]
                            .toString();
		}
            }
        }
    }
}