Estoy trabajando en una aplicación de JavaScript que usa la pila clásica de nodo/babel/webpack que hace un uso intensivo de las tablas de búsqueda. El código típico se ve así:
const computeLookupTable = () => { // Expensive computation here }; export const LookupTable = computeLookupTable();Esto funciona bien en general, pero hay una desventaja importante: el dispositivo del usuario tiene que hacer todo el cálculo previo cuando se inicia la aplicación. Esto parece bastante innecesario ya que el resultado del cálculo siempre será el mismo. Vale la pena especificar un tiempo de compilación para la compilación de producción para mejorar la experiencia del usuario.
¿Cómo puedo cambiar este comportamiento, como la ejecución de computeLookupTable durante el proceso de compilación y obtener directamente los datos allí en el blob generado que se envía a los usuarios?
No estoy seguro de si esta es la mejor manera, pero puede usar el complemento de definición de Webpack para reemplazar los valores:
En webpack.config.js :
import webpack from "webpack"; import { LookupTable } from "./computeLookupTable"; module.exports = { // ... plugins: { new webpack.DefinePlugin({ "lookupResults": JSON.stringfify(LookupTable) }) } }Sin embargo, tenga en cuenta que no puede pasar funciones ni nada, solo objetos simples o primitivos. En su código, podría pretender que la variable existe mágicamente:
export default function Something() { const results = lookupResults; return results.data; } Una advertencia es que debe crear una nueva variable para evitar una sintaxis no válida como { data: "..." }.data , pero en su lugar const results = { data: "..." }; results.data .
La forma más obvia y no tan rara/natural de hacerlo es generar archivos estáticos antes de agruparlos y luego permitir que Webpack los empaquete por nosotros.
En webpack.config.js :
import fs from "fs"; import webpack from "webpack"; import { LookupTable } from "./computeLookupTable"; module.exports = (staticData => { fs.writeFileSync("./src/data/generated.js", "export default " + JSON.stringify(staticData)); // change this to something // or with JSON (needs plugin): fs.writeFileSync("./src/data/generated.json", JSON.stringify(staticData)); return { /* webpack configs... */ }; })(LookupTable); Y luego digamos que su archivo JS es src/index.js :
import table from "./data/generated"; // do something with it...