У нас есть компонент React, который использует данные, полученные при длительных вычислениях. Предоставленные данные (результат длинных вычислений) всегда одинаковы (для всех пользователей).
Я хочу сделать так, чтобы эти вычисления выполнялись один раз (во время минимизации), а не каждый раз, когда пользователь загружает страницу.
Webpack использует TerserPlugin для минимизации по умолчанию, когда находится в производственном режиме.
- Достаточно ли умен TerserPlugin, чтобы выяснить, что длинные вычисления всегда возвращают один и тот же результат и оптимизировать его?
- Если это так, есть ли способ проверить, что вычисления не выполняются во время выполнения?
console.log определенно помешает оптимизации. - Если нет, может, другие плагины могут это сделать? Например, Uglify JS.
Упрощенная конфигурация веб-пакета:
...
module.exports = {
mode: 'production',
entry: {
app: ['...'],
},
output: {
path: '...',
filename: "[name].bundle.js",
publicPath: "/"
},
module: {
rules: [
{
test: /\.html$/,
loader: "file-loader?name=[name].[ext]"
},
{
test: /\.(jsx?|tsx?)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
}
},
...
]
},
resolve: {
extensions: [.ts", ".tsx", ".js", ".jsx"],
modules: [
path.join(__dirname, "./src"),
]
},
};
Единственный способ, который я могу себе представить, - это создать скрипт, который создает файл json с нужными данными.
- Это хорошее решение или есть лучшее, более простое? Некоторые недостатки, например: Линтер может жаловаться на то, что импорт не существует, более сложная настройка.
Вот демо с примером использования.