Entonces, swiperjs, de docs:
"Por defecto, Swiper exporta solo la versión principal sin módulos adicionales (como Navegación, Paginación, etc.). Por lo tanto, también debe importarlos y configurarlos:"
// core version + navigation, pagination modules: import Swiper, { Navigation, Pagination } from 'swiper';Bueno, lo hice. Este es mi archivo de prueba index.js:
import Swiper, { Navigation, Pagination } from 'swiper'; console.log(Swiper);Y esta es la configuración de mi paquete web:
const path = require('path'); const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { //mode: 'development', mode: 'production', watch: true, entry: { index: './src/index.js', }, output: { filename: '[name].js', path: path.resolve(__dirname, 'dist'), clean: true, }, optimization: { minimize: true, usedExports: true, } plugins: [ new BundleAnalyzerPlugin() ], module: { rules: [ { test: /\.m?js$/, exclude: /node_modules/, use: { loader: "babel-loader", options: { presets: ['@babel/preset-env'] } } } // babel ] // rules } // module }; Bueno, el gráfico de BundleAnalyzer muestra que TODOS los módulos swiper están agrupados. ¿Por qué? ¿Cómo puedo evitar eso? Ya deshabilité sideEffect de package.json y activé las exportaciones providedExports en las optimizaciones.
El código fuente de swiper.esm.js se copia aquí como referencia: https://jsfiddle.net/fw4zj8qk/
Descubrí el problema: con swiper (al menos), la opción sideEffects debe usarse en el nivel del cargador y no en el nivel del paquete. O tal vez pueda usar a nivel de paquete, pero declarando explícitamente los archivos. Sin embargo, no lo intenté. En cambio, funcionó configurando efectos secundarios como este:
module: { rules: [ // [...] here normally there are babel settings and the like { // here doing the swiper loader and declaring no sideEffects test: /swiper\.esm\.js/, sideEffects: false } ] // rules } // moduleAhora Swiper se sacude el árbol.