我正在使用經典的 node/babel/webpack 堆疊開發一個 javascript 應用程式，該堆疊大量使用查找表。典型的代碼如下所示：
const computeLookupTable = () => {
// Expensive computation here
};
export const LookupTable = computeLookupTable();
這總體上運行良好，但有一個主要缺點：用戶的設備必須在應用程式啟動時執行所有預計算。這似乎是不必要的，因為計算的結果總是相同的。值得為生產構建指定一些構建時間以改善用戶體驗。
如何更改這種行為，例如computeLookupTable在構建程序中運行，并直接在生成的 blob 中獲取發送給用戶的資料？
uj5u.com熱心網友回復：
選項1
不確定這是否是最好的方法，但您可以使用 Webpack 的定義插件來替換值：
在webpack.config.js：
import webpack from "webpack";
import { LookupTable } from "./computeLookupTable";
module.exports = {
// ...
plugins: {
new webpack.DefinePlugin({
"lookupResults": JSON.stringfify(LookupTable)
})
}
}
不過要意識到，您不能傳遞函式或任何東西，只能傳遞普通物件或原語。在您的代碼中，您可以假裝變數神奇地存在：
export default function Something() {
const results = lookupResults;
return results.data;
}
一個警告是，您必須創建一個新變數來避免無效語法，例如{ data: "..." }.data，但是const results = { data: "..." }; results.data。
選項 2
更明顯和不那么容易/自然的方法是在捆綁之前生成靜態檔案，然后允許 Webpack 為我們捆綁它。
在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);
然后假設您的 JS 檔案是src/index.js：
import table from "./data/generated";
// do something with it...
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/445950.html
標籤：javascript 节点.js 网页包 巴别塔