Resolva o problema de que, ao usar o uniapp para desenvolver o miniaplicativo WeChat, o pacote principal é muito grande e o vendor.js é muito grande e não pode ser empacotado.

Ao desenvolver pequenos programas em uniapp, acredito que muitos desenvolvedores encontraram o problema de que o tamanho do código é muito grande para ser empacotado.Neste momento, é necessário otimizar o tamanho do pequeno pacote de programas. Deixe-me compartilhar minhas idéias de solução abaixo. Espero que possa lhe dar alguma ajuda.

Método 1: fotos online

A razão pela qual o miniprograma é grande é porque se os recursos de imagem no diretório estático forem muito grandes, podemos fazer upload das imagens estáticas para o servidor de imagens, e o miniprograma usa links para baixar e usar as imagens.

Utilize endereços online para imagens estáticas e não os coloque no projeto, exceto o ícone da navBar, pois só pode utilizar recursos locais, que são relativamente pequenos.

1. Faça upload de recursos de imagem para o servidor de imagens

Carregue as imagens cortadas para o servidor de imagens,
como https://www.xxxxxxxx.com.cn/wx/static/images/1.png

2. Lidar com referências de imagem em JS e vue

2.1. Definir variáveis globais JS

Defina variáveis globais js na página main.js

Vue.prototype.staticDir = 'https://www.xxxxxxxx.com.cn/wx/static/'; 
Vue.prototype.getStaticFilePath = function (url) {
    return Vue.prototype.staticDir + url;  
}

2.2. Substitua o endereço da imagem em vue

O endereço da imagem que citamos antes foi o seguinte:

<view class="demo">
    <image src="/static/images/1.png"></image>
</view>

Agora podemos modificar src para ficar assim:

<view class="demo">
    <image :src="getStaticFilePath('/images/1.png')"></image>
</view>

3. Processar referências de imagem em CSS

Existe um arquivo especial uni.scss no diretório raiz do uniapp. Você pode usar as variáveis de estilo aqui no código scss sem importar este arquivo. O compilador uni-app processa especialmente este uni.scss na configuração do webpack, para que cada arquivo scss seja injetado neste uni.scss para obter um efeito disponível globalmente. Colocamos a variável de diretório estático do scss aqui para que ela possa ser usada globalmente.

3.1. Definir variáveis globais scss

Adicione no final do uni.scss:

// 背景图片路径
$custom-bg-img-url:'https://www.xxxxxxxx.com.cn/wx/static/';

3.2. Renomeie o arquivo css para arquivo scss

Renomeie o arquivo css original para um arquivo scss e modifique a referência em vue da seguinte maneira. Adicionado lang="scss"

<style scoped lang="scss">

</style>

3.3. Substitua o endereço da imagem em css

No passado, o endereço da imagem de fundo em CSS era o seguinte:

.bgimg {
    width: 40rpx;
    height: 40rpx;
    background-image: url(/static/imags/1.png);
    background-size: cover;
}

Agora podemos modificar o URL para ficar assim:

.bgimg {
    width: 40rpx;
    height: 40rpx;
    background-image: url($custom-bg-img-url+'/images/1.png');
    background-size: cover;
}

Método 2: carregamento de subpacotes

Além das páginas do TabBa, outras páginas são subcontratadas para garantir o tamanho do pacote principal, pois esses js e componentes estáticos também serão colocados no pacote principal após a compilação. O método de subcontratação é explicado detalhadamente no site oficial.

Atualmente, o tamanho do subpacote do miniprograma tem as seguintes restrições:

O tamanho de todos os subpacotes de todo o miniprograma não pode exceder 20 M.
O tamanho de um único subpacote/pacote principal não pode exceder 2 M.

A subcontratação de miniprogramas pode otimizar o tempo de download para o primeiro lançamento do miniprograma e permitir melhor dissociação e colaboração quando várias equipes desenvolvem juntas.

Para uso específico, consulte:

O site oficial introduz
o uso de subcontratação,
subcontratação independente,
subcontratação, pré-download,
subcontratação e assincronização

Método 3: Separação de dependências

Depois de usar o subpacote, você encontrará um problema estranho: os componentes e arquivos js do subpacote serão empacotados no arquivo vendor.js do pacote principal, o que faz com que o vendor.js seja muito grande.

1. Verifique manifest.json. Na visualização do código-fonte neste arquivo, há uma otimização no nó mp-weixin.

O nó de subpacotes em otimização é usado para controlar a subcontratação do WeChat. Este nó precisa ser definido como verdadeiro.

"optimization" : {
    "subpackages" : true
}