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?
console.log
) no início e retorno da promisses para ver se está retornando e chamando a próxima corretamente?