lavas static反复刷新白屏问题

[Leopold1988]

项目clone下来，除了page/，其他无任何改动。

lavas build
cd /dist
lavas static

lavas static预览时，反复刷新会有白屏问题，偶现，10次出现7次白屏。
我以为是lavas static的问题，于是改用nginx，按照教程的配置，反复刷新任然有白屏问题。

系统：
Mac OS 10.10.5

chrome版本：
版本 65.0.3325.181（正式版本） （64 位）

这是我的lavas配置：

const path = require('path');
const BUILD_PATH = path.resolve(__dirname, 'dist');
const isDev = process.env.NODE_ENV === 'development';
const isProd = process.env.NODE_ENV === 'production';

module.exports = {
    build: {
        ssr: false,
        path: BUILD_PATH,
        publicPath: '/',
        ssrCopy: isDev ? [] : [
            {
                src: 'server.prod.js'
            },
            {
                src: 'package.json'
            }
        ]
    },
    router: {
        mode: 'history',
        base: '/',
        // pageTransition: {
        //     type: 'fade',
        //     transitionClass: 'fade'
        // }
        pageTransition: {
            type: 'slide',
            slideLeftClass: 'slide-left',
            slideRightClass: 'slide-right',
            alwaysBackPages: ['index'],
            alwaysForwardPages: []
        }
    },
    serviceWorker: {
        swSrc: path.join(__dirname, 'core/service-worker.js'),
        swDest: path.join(BUILD_PATH, 'service-worker.js'),
        // swPath: '/custom_path/', // specify custom serveice worker file's path, default is publicPath
        globDirectory: BUILD_PATH,
        globPatterns: [
            '**/*.{html,js,css,eot,svg,ttf,woff}'
        ],
        globIgnores: [
            'sw-register.js',
            '**/*.map'
        ],
        appshellUrl: '/appshell',
        dontCacheBustUrlsMatching: /\.\w{8}\./
    }
};

[Leopold1988]

补充一句lavas dev没问题

[PengXing]

我用你的 lavas.config.js 试着编译了一下 init 下来的项目，没有任何问题啊 [捂脸]

还有其他错误信息吗？

[Leopold1988]

@PengXing 没有别的错误 就是白屏的问题（#app白屏没有任何DOM，就像截图一样） 我的FF Safari 都能复现，难道我编译出了问题么？我用的 cnpm i 安装所有依赖

[Leopold1988]

我把我的dist文件夹发给的别人，看来是我lavas build的dist出了问题。
但是为什么不知道。

[PengXing]

我觉得这个问题可能是你的 page 里面的逻辑有问题，你可以把 Chrome 的调试工具里看看是不是有被捕获的异常

[Leopold1988]

额 我把项目全删了 重新clone的 按步骤安装 问题还是存在。。 如果你想要 我可以把dist给你拿去分析

[Leopold1988]

https://github.com/Leopold1988/my-lavas-dist/tree/master/dist

[PengXing]

确实，我们发现了这个问题，分析一下啊，有答案了回复你，appshell 模板没有这个问题，basic 模板有这个问题

[easonyq]

@Leopold1988 我这里也可以复现，并且原因已经找到了。

核心原因和两次修复有关，分别是 SSR 模式 + AppShell，根元素的样式会无法应用 和 SPA 中进一步减少白屏时间。后者的修复中引入了 BUG，配上前者的代码，引发了这个问题。当页面 js 加载速度快于 css 加载速度时就会触发，和哪个模板无关，和 Service Worker 也无关。只是可能 basic 模板更加容易触发而已。

发版完成后我会通知你，多谢反馈问题！

核心原因描述

这个问题的核心在于，没有把配置项中的 build.cssExtract 添加到开发者项目的 .lavas/config.json 中。

这样导致了在开发者的 core/entry-client.js 中获取 lavasConfig.build.cssExtract 值为 undefined，进一步影响了 enableAsyncCSS 变量的判断，最终导致 window.mountLavas() 方法被执行两次。

而为了修复 #146 ，在 mountLavas 方法中有清空挂载点 DOM 的操作，执行两次就会导致已经挂载成功的 DOM 又被清除，而 Vue 的 vdom 并不同步，引发了渲染失败。

[Leopold1988]

还有我用npm全局安装lavas也安装不上（sudo也不行），不过cnpm却可以
npm install lavas -g

2018-04-26T06_57_19_283Z-debug.log

错误如下：
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/lavas/node_modules/acorn
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/lavas/node_modules/acorn-dynamic-import
...
npm ERR! path /usr/local/lib/node_modules/lavas/node_modules/acorn
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall access
npm ERR! enoent ENOENT: no such file or directory, access '/usr/local/lib/node_modules/lavas/node_modules/acorn'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

[easonyq]

npm 安装失败这个问题我就不清楚了哎……看报错信息好像是什么权限问题？

[easonyq]

@Leopold1988 已经发布了 lavas-core-vue@1.1.12，烦请更新。

[Leopold1988]

@easonyq 马上更新，赞！

[PengXing]

安装失败可以尝试使用 cnpm