关于vite:Vite配置如何优雅的代码分割

Vite 如何配置宰割代码

什么是代码宰割 /code spliiting

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

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

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

// 提前装置 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 函数 自定义宰割。（上面的案例）

如何在 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();}
            }
        }
    }
}