Diretório de artigos
1. O que é divisão de código/divisão de código
O conceito de rollup ecológico front-end e webpack.
Se todo o código for compactado, o código final poderá ser muito grande. Afetando assim o tempo de carregamento.
Além disso, não é necessário muito código quando é carregado inicialmente. Portanto, de acordo com a urgência de uso do código, podemos dividir e empacotar o código e carregá-lo sob demanda.
2. O princípio do método padrão de divisão de código rollup no Vite
A divisão de código rollup code-spliiting é implementada pelas funções modulares import e export js de es6 esm (Módulo ECMAScript) por padrão, o que não pode ser realizado pelo padrão CommonJS.
// Instala o rollup com antecedência
npm i -g rollup
case
Índice
├─dist
└─src
foo.js
main.js
main1.js
(1) Dividir e empacotar testes de acordo com a instrução de importação dinâmica.
padrão de exportação foo.js
'olá foo!';
// main.js文件
// 动态导入案例1
export default function () {
import('./foo.js')
.then(() => {
// console.log(导入成功);
})
.catch(() => {
});
}
Execute rollup src/main.js -f cjs -d dist
Package/main.js gera dois arquivos
Exibição de código empacotado
// dist\foo-xxxxxx.js
'use strict';
var foo = 'hello foo!';
exports["default"] = foo;
// dist\main.js
'use strict';
// Importação dinâmica caso 1
function main () {
Promise.resolve().then(function () {
return require('./foo-e385385a.js'); })
.then(() => {
// console.log(导入成功);
})
.catch(() => {
});
}
module.exports = main;
De acordo com a instrução de importação dinâmica, o teste de embalagem foi verificado com sucesso.
(2) Dividir e empacotar testes de acordo com os pontos de entrada de importação de recursos.
// foo.js
export default 'hello foo!';
// main.js文件
// 资源静态导入案例1
import foo from './foo.js';
export default function () {
console.log(foo);
}
// arquivo main1.js
// caso de importação estática de recurso 2
import foo from './foo.js';
export default function () {
console.log(foo);
}
Execute rollup src/main.js src/main1.js -f cjs -d dist
Empacote os arquivos /main.js e /main1.js para gerar três arquivos
Exibição de código empacotado
// dist\foo-xxxx.js
'use strict';
var foo = 'hello foo!';
exports.foo = foo;
// dist\main.js
'use strict';
var foo = require('./foo-f41bffe6.js');
// Caso de importação estático
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;
De acordo com o recurso, a verificação do teste de empacotamento de segmentação de ponto de entrada de importação foi bem-sucedida.
(3) A função manualChunks personaliza manualmente a segmentação. (caso abaixo)
3. Como configurar (vite.config.ts) divisão de código/divisão de código no Vite (chave principal)
1. Método de divisão de código 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 code splitting method 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();
}
}
}
}
}