nunjucks动态更新模版路径

每次请求都动态读取文件确实会有一定的性能影响,特别是在高并发的情况下。为了解决这个问题,可以在应用启动时读取模板配置,并在模板更改时更新配置,这样只需要在应用启动和模板更改时读取文件,而不是每次请求都读取文件。

可以使用一个全局变量来缓存当前的模板路径,只有在更改模板时才更新该变量和文件。

以下是改进后的示例代码:

目录结构示例

复制代码
project
│
├── views/
│   ├── template1/
│   │   └── index.njk
│   ├── template2/
│   │   └── index.njk
│
├── config/
│   └── templateConfig.json
│
├── app.js

templateConfig.json 示例内容

json 复制代码
{
    "currentTemplate": "template1"
}

app.js 示例代码

javascript 复制代码
const express = require('express');
const nunjucks = require('nunjucks');
const path = require('path');
const fs = require('fs');

const app = express();

// 设置静态文件目录
app.use(express.static(path.join(__dirname, 'public')));

// 全局变量,缓存当前模板路径
let currentTemplatePath;

// 读取配置文件中的当前模板路径
function loadTemplateConfig() {
    const config = JSON.parse(fs.readFileSync(path.join(__dirname, 'config/templateConfig.json'), 'utf8'));
    currentTemplatePath = config.currentTemplate;
}

// 配置Nunjucks环境
function configureNunjucks() {
    nunjucks.configure(path.join(__dirname, `views/${currentTemplatePath}`), {
        autoescape: false,
        noCache: true,
        express: app
    });
}

// 初始化时加载配置
loadTemplateConfig();
configureNunjucks();

// 路由
app.get('/', (req, res) => {
    res.render('index.njk', { title: 'Hello Nunjucks!' });
});

// 路由:更改模板路径
app.get('/change-template', (req, res) => {
    const newTemplate = req.query.template;
    if (newTemplate) {
        currentTemplatePath = newTemplate;
        const config = { currentTemplate: newTemplate };
        fs.writeFileSync(path.join(__dirname, 'config/templateConfig.json'), JSON.stringify(config), 'utf8');
        configureNunjucks(); // 更新Nunjucks配置
        res.send(`Template changed to ${newTemplate}`);
    } else {
        res.send('No template specified');
    }
});

// 启动服务器
const port = 3000;
app.listen(port, () => {
    console.log(`服务器已启动,访问地址:http://localhost:${port}`);
});

解释

  1. 全局变量 currentTemplatePath:缓存当前的模板路径。
  2. loadTemplateConfig 函数:在应用启动时读取模板配置文件,并将路径保存到全局变量中。
  3. configureNunjucks 函数:根据缓存的模板路径配置Nunjucks环境。
  4. 初始化时加载配置 :在应用启动时调用 loadTemplateConfigconfigureNunjucks 函数。
  5. 更改模板路径的路由:当用户更改模板路径时,更新全局变量、文件并重新配置Nunjucks。

通过这种方式,只有在应用启动和用户更改模板路径时才会读取文件和配置Nunjucks,避免了每次请求都读取文件的性能问题。

相关推荐
脑袋大大的4 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络5 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘5 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way5 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家6 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
GISer_Jing9 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆9 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding10 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
海天胜景10 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui