美文网首页
nuxt+pm2部署,解决nuxt异常缓慢的问题

nuxt+pm2部署,解决nuxt异常缓慢的问题

作者: 野马关 | 来源:发表于2021-04-25 17:42 被阅读0次

    部署到线上后,发现nuxt异常缓慢

    一检查network,发现有10M+的js包?

    没错,你部署失败了。

    不妨本地尝试一下

    nuxt build
    nuxt // 1
    nuxt start // 2
    

    这两个命令的差异,不难看出

    • 模式1是调试模式,会加载所有js,包的体积很大,很慢
    • 模式2是服务模式,仅会加载部分js,包的体积很小,速度很快

    那么,为什么本地没问题,pm2部署后就会进入模式1呢?
    很简单

    pm2 start
    pm2 start xx.js
    

    这两种模式可能都会进入模式1,主要是因为没有携带start参数,直接启动了nuxt
    那么要怎么加上呢
    在命令行中,可以增加

    pm2 start -- start
    

    -- 后的内容会被原样传递给调用的js,这里调用了哪个js文件呢?
    我们可以在ecosystem.config.js中找到
    一般它的内容为:

    // 错误的配置文件
    module.exports = {
        "apps": [{
            "name": "test-frontend",
            "script": "./server/index.js",
            "watch": false,
            "env": {
                "NODE_ENV": "production"
            },
            "env_dev": {
                "NODE_ENV": "development"
            }
        }]
    }
    

    script即pm2调用的脚本,
    所以,首先要将这里替换为./node_modules/nuxt/bin/nuxt.js
    也可以替换为npm run start
    记得核对你package.json里的命令
    这两种方式,第二种会导致pm2日志有误,所以推荐第一种。

    除了script,解决加载慢的关键参数来了,start要放在哪里呢
    答案是,args

    args: 'start'
    

    但是,重点来了,假设你用到了环境区分scriptargs放在上面是无效的
    必须放在下面
    所以整个配置文件是这样的

    // 正确的配置文件
    module.exports = {
        "apps": [{
            "name": "test-frontend",
            "script": "./node_modules/nuxt/bin/nuxt.js",
            "args": 'start',
            "watch": false,
            "env": {
                "NODE_ENV": "production",
                "script": "./node_modules/nuxt/bin/nuxt.js",
                "args": 'start'
            },
            "env_dev": {
                "NODE_ENV": "development",
                "script": "./node_modules/nuxt/bin/nuxt.js",
                "args": 'start'
            }
        }]
    }
    

    启动命令是这样的

    pm2 start ecosystem.config.js --env dev
    

    整个过程,官方文档并没有指引,所以还是比较坑的
    如果这篇文章帮助了你,留个评论再走

    相关文章

      网友评论

          本文标题:nuxt+pm2部署,解决nuxt异常缓慢的问题

          本文链接:https://www.haomeiwen.com/subject/twadrltx.html