0

Construí um pacote baseado em CSS3 / CSS4, HTML5 e suas APIs, o pacote contém 101 arquivos e usa promessas para diferenciar os arquivos e medir sua prioridade, ao final de uma promessa, você pode ou não iniciar outra conforme necessário, no seguinte formato:

import(/* webpackMode: "lazy-once" */ /* webpackChunkName: "exemple1" */ /* webpackPrefetch: true */ /* webpackPreload: true */ "../module1").then(exemple1 => {
import(/* webpackMode: "lazy-once" */ /* webpackChunkName: "exemple2" */ /* webpackPrefetch: true */ /* webpackPreload: true */ "../module2").then(exemple2 => {
//code execution or do another import
});
});

Os módulos são assim:

export default function Exemple1() {    
//code
};
new Exemple1()

O pacote funciona perfeitamente sem o Webpack, com o Webpack, só funciona no primeiro acesso, nos acessos posteriores funciona parcialmente, verificou-se que todos os módulos aparecem no source-map, mas apenas alguns são executados, embora todos eles sejam realmente necessários, o tamanho total do pacote não minimizado é de 411 kb ou 652 KB no disco, nenhum erro foi registrado no console. Veja os arquivos de configuração: (sem necessidade de dependências)

Package.json - Nome, descrição, versão, arquivo principal e arquivo de teste foram omitidos por razões de segurança.

{
   "private": true,
   "mode": "production",
   "main": "....",
   "name": "....",
   "description": "...",
    "version": "...",
    "scripts": {
        "test": "....",
        "dev": "npm run development",
        "development": "npx webpack",
        "watch": "npm watch",
        "prod": "npm run production",
        "production": "npx webpack"
    },
    "devDependencies": {
        "webpack": "^5.35.0",
        "webpack-cli": "^4.6.0"
    },
    "dependencies": {
        "es6-promise": "^4.2.8"
    }
}

Webpack.config.js

const path = require('path');
var webpack = require('webpack');

module.exports = {
mode: 'production',
cache: false,
devtool: 'source-map'
}

Tentou-se uma redução no número de pedaços (arquivos gerados) com o código abaixo, mas não resolveu o problema:

module.exports = {
[...]
entry: './main.js',
output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: 'js/',
    filename: 'main.js',  library: 'packgeexemple',
    sourceMapFilename: '[name].[contenthash].map',
    chunkFilename: '[name].[contenthash].js',   
    libraryTarget: 'window',
    libraryExport: 'default',
    clean: true,  
},
optimization: {
     splitChunks: {
       cacheGroups: {
         vendor: {
           test: /[\\/]node_modules[\\/]/,
           name: 'vendors',
           chunks: 'all',
         },
       },
     },
     },
  plugins: [
    new webpack.optimize.LimitChunkCountPlugin({
      maxChunks: 5,
    }),
  ]
}

Como isso pode ser resolvido?

2
  • já tentou fazer um debug (pode ser um console.log) no início e retorno da promisses para ver se está retornando e chamando a próxima corretamente? 22/04/2021 às 8:25
  • Pior que não tem nada, ao ativar o debug no devtool, com aquelas pausas em exceção, eu só vejo algum erro, se eu incluir jquery, mas descobrir que não é erro, o jquery testa o suporte com mensagens de erro, principalmente querySelector. 22/04/2021 às 11:55

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .