Vite如何配置宰割代码

什么是代码宰割/code spliiting

前端生态 rollup 和 webpack都有的概念。
如果把所有代码都打包到一起，可能最终的代码十分大。从而影响加载工夫。

而且，很多代码是初始加载时，不须要的。因而，咱们能够依据代码应用的紧急水平，将代码宰割打包后，能够按需加载。

Vite 中 rollup code spliiting宰割默认办法原理

// 提前装置rollupnpm i -g rollup

案例
目录

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

1.依照动静导入语句宰割打包测试。

//// foo.jsexport default 'hello foo!';// main.js文件// 动静导入案例1export 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';// 动静导入案例1function main () {    Promise.resolve().then(function () { return require('./foo-e385385a.js'); })    .then(() => {        // console.log(导入胜利);    })    .catch(() => {});}module.exports = main;

依照动静导入语句宰割打包测试验证胜利。

2.依照资源导入入口点宰割打包测试。

// foo.jsexport default 'hello foo!';
// main.js文件// 资源动态导入案例1import foo from './foo.js';export default function () {    console.log(foo);}// main1.js文件// 资源动态导入案例2import 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函数 自定义宰割。（上面的案例）

如何在Vite中配置（vite.config.ts）代码宰割/code spliiting （外围要害）

Vite代码宰割办法1

// vite.config.tsbuild: {    // 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.tsbuild: {    // 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();        }            }        }    }}