Estoy escribiendo un cargador de paquete web personalizado para eliminar el código innecesario que Terser no puede recoger.
Aquí está la salida source de muestra del cargador de paquetes web;
const SvgsMap = { map1: () => { return '1'; }, map2: () => { return '2'; }, map3: () => { return '3'; }, // ...redacted map100: () => { return '100'; }, } Tenga en cuenta que arriba entra en el cargador como una cadena. Y tengo una lista blanca de string[] como cuál de ellos debería incluirse en la salida de compilación;
const whitelistsArr = ["map1"] Actualmente estoy escribiendo un cargador de paquete web para preprocesarlo antes de incluirlo en el paquete. Que actualmente usa Node VM que supongo podría analizarlo en un objeto javascript, en el que luego puedo eliminar algunas de las propiedades no utilizadas en SvgsMap , luego volver a generarlo como una cadena.
Mi pregunta es;
Cualquier sugerencia es apreciada.
Aquí está el código de mi cargador hasta ahora;
const path = require( 'path' ); const { loader } = require( 'webpack' ); const vm = require( 'vm' ); const whitelists = ['frame21Web']; const loaderFn = function ( source ) { /** @type {loader.LoaderContext} */ // eslint-disable-next-line babel/no-invalid-this const self = this; const filename = path.basename( self.resourcePath ); const templateWithoutLoaders = filename.replace( /^.+!/, '' ).replace( /\?.+$/, '' ); const vmContext = vm.createContext( { module: {} } ); let newSource = ''; try { const vmScript = new vm.Script( source, { filename: templateWithoutLoaders } ); const cachedData = vmScript.createCachedData(); console.log(cachedData.toString()); // Doesn't seem to output as a string. } catch (err) { console.error(err); } console.log( 'loader', filename, source ); process.exit( 0 ); return source; }; module.exports = loaderFn;Puede haber un par de respuestas a esta pregunta. Difícil de saber sin conocer el razonamiento detrás de la eliminación.
Si tiene el control del archivo, puede usar una combinación del complemento Define de Webpack y alguna lógica if/else . Por ejemplo
// in your WP config file new webpack.DefinePlugin({ IS_CLIENT: JSON.stringify(true), // will only be true when compiled via WP }); // in your module if (process.env.IS_CLIENT) { SvgsMap.map1 = () => '1'; }El patrón anterior permite agregar/eliminar fragmentos de código para su paquete de Cliente, al mismo tiempo que permite su uso en el Servidor.
La otra opción sería escribir un complemento de Babel personalizado (no un complemento de WP). Encontré este artículo útil en el pasado, cuando tuve que escribir algunos complementos. Babel le brinda más control sobre cómo se procesan las partes de un archivo JS, y puede usar ese complemento fuera de WP (como mientras ejecuta pruebas de unidad).