Tree-shaking e importação automática
Exportações nomeadas para tree-shaking, integração com unplugin-vue-components e configuração do resolvedor.
Tree-shaking e importação automática é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.
O que é a eliminação de código não utilizado
A eliminação de código não utilizado remove código morto: um empacotador descarta as exportações que o consumidor nunca importa. Uma biblioteca bem compilada permite que os aplicativos incluam apenas os componentes que usam, mantendo os pacotes pequenos.
As exportações nomeadas permitem isso
Use exportações nomeadas na sua entrada, para que cada importação possa ser analisada estaticamente. Uma única exportação padrão contendo tudo (um objeto agregador) não pode passar por essa eliminação.
// GOOD: named exports
export { MyButton } from "./MyButton.vue";
export { MyCard } from "./MyCard.vue";Evite um objeto agregador padrão
Exportar um único objeto com todos os componentes obriga os empacotadores a manter todos eles, mesmo que o aplicativo use apenas um.
// BAD: defeats tree-shaking
export default { MyButton, MyCard, MyTable };O consumidor importa o que precisa
Com exportações nomeadas, o consumidor extrai por desestruturação apenas os componentes usados, e o restante é removido da compilação.
import { MyButton } from "my-ui-lib";
// MyCard, MyTable are never bundledO campo sideEffects
Os empacotadores presumem que os módulos podem ter efeitos colaterais e os mantêm. Definir "sideEffects": false em package.json informa que seus módulos são puros e podem ser removidos com segurança.
{
"sideEffects": false
}Declarando efeitos colaterais do CSS
Se o seu pacote tiver importações de CSS que não devem ser removidas, liste-as para que somente elas sejam preservadas.
{
"sideEffects": ["**/*.css"]
}Importação automática para consumidores
Para evitar que os consumidores façam importações manuais, as bibliotecas distribuem um resolvedor para unplugin-vue-components, que importa automaticamente os componentes usados nos modelos.
npm install -D unplugin-vue-componentsFornecendo um resolvedor
Um resolvedor é uma função que, dado o nome de um componente usado, retorna de onde importá-lo. Inclua um no seu pacote.
// my-ui-lib/resolver.js
export function MyUiResolver() {
return {
type: "component",
resolve: (name) => {
if (name.startsWith("My")) {
return { name, from: "my-ui-lib" };
}
}
};
}Configuração do consumidor
O consumidor registra o plug-in com seu resolvedor. Agora os componentes usados nos modelos são importados automaticamente e continuam sendo eliminados quando não utilizados.
// consumer vite.config.ts
import Components from "unplugin-vue-components/vite";
import { MyUiResolver } from "my-ui-lib/resolver";
export default defineConfig({
plugins: [
vue(),
Components({ resolvers: [MyUiResolver()] })
]
});Importação automática e eliminação de código não utilizado
Como o resolvedor transforma o uso nos modelos em importações nomeadas reais, somente os componentes usados são empacotados: você mantém tanto a praticidade quanto pacotes pequenos.
Evite o registro global
Uma biblioteca que registra automaticamente todos os componentes por meio de app.use impede a eliminação de código não utilizado. Prefira exportações nomeadas e um resolvedor opcional, para que os consumidores escolham os componentes individualmente.
Verificação rápida
Qual configuração de package.json informa aos empacotadores que seus módulos podem ser eliminados com segurança?
Recapitulação
Ative a eliminação de código não utilizado usando exportações nomeadas (nunca um objeto agregador padrão) e definindo "sideEffects": false (ou listando o CSS). Para facilitar o uso, inclua um resolvedor de unplugin-vue-components, para que os consumidores importem automaticamente os componentes usados e ainda empacotem somente o que utilizam; evite também impor o registro global.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 42
- Aulas
- 156
Perguntas Frequentes
A aula “Tree-shaking e importação automática” é grátis?
Sim — o texto completo de “Tree-shaking e importação automática” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.
O que vou aprender em “Tree-shaking e importação automática”?
Exportações nomeadas para tree-shaking, integração com unplugin-vue-components e configuração do resolvedor. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Vue Academy?
Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Tree-shaking e importação automática”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Vue Academy?
Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Configuração do modo de biblioteca do Vite
- Declarações TypeScript para bibliotecas de componentes
- Tree-shaking e importação automática
- Publicação no npm e versionamento semântico