Giter VIP home page Giter VIP logo

lavas's Introduction

lavas

npm (scoped with tag) Build Status Coverage Status NPM downloads

基于 Vue 的 PWA 解决方案,帮助开发者快速搭建 PWA 应用,解决开发 PWA 过程中遇到的各种问题。

DEMO App Shell 生成的简易 DEMO,建议在手机浏览器中打开

lavas 提供了命令行工具,可以通过以下命令进行安装

$ npm install -g lavas

再通过 lavas init 并填入项目基本信息新建一个项目

$ lavas init

启动开发服务器

$ lavas dev

构建部署之后,您的站点就拥有 PWA 的体验了。

文档部分

Enjoy it!

lavas's People

Contributors

clark-t avatar easonyq avatar miyapan avatar pengxing avatar xiaoiver avatar xtx1130 avatar zhangzhiqiang37 avatar zoumiaojiang avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

lavas's Issues

每个路由组件拥有独立的 Skeleton?

问题描述

目前 Skeleton 是在构建时使用 Vue SSR 把样式和 DOM 内联到 HTML 中,最大程度减少白屏时间。
但如果 SPA 里各个路由页面差异很大,很难抽象出统一的一个“页面骨架”,这种场景下常常退化成了 Loading。

饿了么是在 MPA 下采用这种方案,所以效果很好。商家列表页,菜品详情页都是独立页面,因此可以有独立的 Skeleton,我们在 MPA 方案中也提供了多 Skeleton 配置。但如果我们想提升在 SPA 中的效果,需要额外做一些改动。

可能的解决方案

核心问题其实是 Skeleton 在 MPA 场景下与页面入口一一对应,而在 SPA 中需要和路由组件一一对应。

理想状态下,每个路由组件可以有各自独立的 Skeleton,也就是页面的初始状态。
这就要求在构建时把所有 Skeleton 的样式和 DOM 都内联到 HTML 中,同时增加基于当前路由的逻辑判断,隐藏展示正确的 Skeleton 内容。

<style>全部 Skeleton 样式</style>
<div id="page1" style="display:none">Page1 Skeleton</div>
<div id="page2" style="display:none">Page2 Skeleton</div>
<script>
// hash history 模式?
if (getMatchedRoute(window.location.href) === '/page1') {
// 展示 page1
}
else {
// 展示 page2
}
</script>

是否需要在 vue-router 加载完毕之后?这样白屏时间会增加。

支持 proxyTable

很多开发者没有 Node 开发经验,也不了解 lavas,不知道 server.dev.js 或者 server.prod.js 能够自己修改并且增加类似于 webpack proxyTable 的功能

如果 lavas 能够默认支持就好了

Appshell版本,装机后,lavas dev报错,node版本v5.1.1

详细错误:/usr/local/mongodb/bin/helloword/server.dev.js:12
let configPath = './lavas.config.js';
^^^

SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:404:25)
at Object.Module._extensions..js (module.js:432:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:313:12)
at Function.Module.runMain (module.js:457:10)
at startup (node.js:138:18)
at node.js:974:3

继续支持 MPA 模式

大致沿用之前的方案,但是需要有几点改进:

  1. MPA 下 service worker 能否支持生成多个
  2. preload 可配,类似 Vue SSR 中 shouldPrefetch/Preload()

删除路由组件造成 hotreload 问题

开发模式下,在 /pages 添加路由组件没问题,但删除新添加的组件就会出现浏览器一直刷新的情况:

[HMR] The following modules couldn't be hot updated: (Full reload needed)

win10 init fail

I can't import the demo name.I don't kown this question is system(win10) or lavas ?

使用 CommonsChunkPlugin 的问题

Lavas 内部使用 CommonsChunkPlugin 将最终打包产物分成如下 chunk:

  • manifest Webpack 运行时代码
  • vue 包含 vuevue-routervue-metavuex 代码
  • vendor 其他第三方依赖,例如 fastclickiscrolles-promise 等等
  • [entry] entry-client 业务代码

分 chunk 的最主要目的是为了某些频繁变动的代码,例如业务代码和第三方依赖,它们的变动不至于导致所有缓存失效。

问题描述

在使用 vuetify 的过程中,我发现 vuetify 被合入到了 vue 而非 vendor 中,详情可见相关 Codelab。这在使用 vuetify 按需加载的场景下会带来严重的问题,只要引入新的组件就会导致 vue 缓存失效。

可能原因

造成问题的原因应该是 vuetify 匹配到了如下正则:

let targets = ['vue', 'vue-router', 'vuex', 'vue-meta'];
// /^(vue|vue-router)$/i
let npmRegExp = new RegExp(targets.join('|'), 'i');
// /^([email protected]@vue|[email protected]@vue-router)$/i
let cnpmRegExp
    = new RegExp(targets.map(t => `_${t}@\\d\\.\\d\\.\\d@${t}`).join('|'), 'i');

另一个可能存在的问题

另外,我是参考 vue 官方模版实现这样的分 chunk 方式的。但是似乎这种方法本身也存在一定问题:文章
需要进一步研究并新开 Issue 解决。

manifest.json 路径可配

当前 lavas.config.js 不可配置 manifest.json 文件地址,虽然可以在模板中写死 manifest.json 的路径,但是这种情况下会导致 manifest.json 的 URL 不会添加版本信息,导致这个文件不会更新

最好的解决方案应该是 lavas.config.js 增加一个配置 manifestUrl: '/static/manifest.json',编译阶段自动加上 ?v={{ BUILD_TIME }}

Windows10上lavas init运行不了

通过npm install -g lavas成功安装了lavas了,但是运行lavas init。控制台报错如下:

image

操作系统和架构
Windows10 专业版。64位

如何正常全局导入module?

如axios, moment 等等, 传统做法是在app.js(入口文件) 直接 import axios from “axios” 即可,
可是在Lavas的框架下, 只能在pages目录下的单页page局部使用, 全局调用会抛出错误 module is not defined

求教, 新转入Node.js 实在documentation 翻遍了都没这方面的说明, 估计是常识所以没有注明吧?

core/index.html.tmpl 功能强化

目前的 index.html.tmpl 可以使用 baseUrl, renderEntry, renderMeta 等方法进行模板的编写,可以适应常规需求。

但如果开发者有自定义的变量想要挂载并使用,因为lavas-core黑盒的关系尚不支持。

可以考虑将模板变量开放,开发者自定义挂载的对象并自由使用。

打包之后的事儿

请问,打包之后,按照官方提示的,还要跑npm install和lavas start命令,是不是需要在服务器上配置node环境?也就是说并不像普通的SPA项目一样,打包完,直接扔上服务器,就可以直接运行?

使用了 defines 后,仍然得不到变量

参考 这里的做法
lavas.config.js中定义了

const isDev = process.env.NODE_ENV === 'development';
const isProd = process.env.NODE_ENV === 'production';


defines: {
    base: {
        BASE_URL: isDev
            ? JSON.stringify('http://192.168.0.233:5555/')
            : JSON.stringify('http://192.168.0.233:5566/')
    }
}

但是在 server.dev.js 中使用的时候是 undefine

console.log("BASE_URL:"+ BASE_URL)

const proxyTable = {
    '/public': {
        target: BASE_URL,
        changeOrigin: true
    }
};

新建多页模版运行出错

Starting to optimize CSS...
./node_modules/extract-text-webpack-plugin/loader.js?{"omit":1,"remove":true}!./node_modules/vue-style-loader!./node_modules/css-loader?{"minimize":false,"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-f8e1795c","scoped":true,"hasInlineConfig":false}!./node_modules/stylus-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./build/loaders/theme-loader.js?{"injectInVueFile":true}!./src/pages/detail/Detail.skeleton.vue
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
at Object.module.exports.pitch (/Users/ll/project/web/mpa-simple/node_modules/extract-text-webpack-plugin/loader.js:25:9)
@ ./src/pages/detail/Detail.skeleton.vue 3:4-489
@ ./src/pages/detail/entry-skeleton.js


/Users/ll/project/web/mpa-simple/node_modules/memory-fs/lib/MemoryFileSystem.js:114
		throw new MemoryFileSystemError(errors.code.ENOENT, _path);
		^
Error
    at MemoryFileSystem.readFileSync (/Users/ll/project/web/mpa-simple/node_modules/memory-fs/lib/MemoryFileSystem.js:114:10)
    at Watching.handler (/Users/ll/project/web/mpa-simple/node_modules/vue-skeleton-webpack-plugin/lib/ssr.js:50:31)
    at Watching._done (/Users/ll/project/web/mpa-simple/node_modules/vue-skeleton-webpack-plugin/node_modules/webpack/lib/Compiler.js:105:8)
    at compiler.emitRecords.err (/Users/ll/project/web/mpa-simple/node_modules/vue-skeleton-webpack-plugin/node_modules/webpack/lib/Compiler.js:78:19)
    at Compiler.emitRecords (/Users/ll/project/web/mpa-simple/node_modules/vue-skeleton-webpack-plugin/node_modules/webpack/lib/Compiler.js:375:38)
    at compiler.emitAssets.err (/Users/ll/project/web/mpa-simple/node_modules/vue-skeleton-webpack-plugin/node_modules/webpack/lib/Compiler.js:61:20)
    at applyPluginsAsyncSeries1.err (/Users/ll/project/web/mpa-simple/node_modules/vue-skeleton-webpack-plugin/node_modules/webpack/lib/Compiler.js:368:12)
    at next (/Users/ll/project/web/mpa-simple/node_modules/tapable/lib/Tapable.js:218:11)
    at Compiler.compiler.plugin (/Users/ll/project/web/mpa-simple/node_modules/vue-skeleton-webpack-plugin/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4)
    at Compiler.applyPluginsAsyncSeries1 (/Users/ll/project/web/mpa-simple/node_modules/tapable/lib/Tapable.js:222:13)
    at Compiler.afterEmit (/Users/ll/project/web/mpa-simple/node_modules/vue-skeleton-webpack-plugin/node_modules/webpack/lib/Compiler.js:365:9)
    at require.forEach.err (/Users/ll/project/web/mpa-simple/node_modules/vue-skeleton-webpack-plugin/node_modules/webpack/lib/Compiler.js:354:15)
    at /Users/ll/project/web/mpa-simple/node_modules/async/dist/async.js:421:16
    at iteratorCallback (/Users/ll/project/web/mpa-simple/node_modules/async/dist/async.js:998:13)
    at /Users/ll/project/web/mpa-simple/node_modules/async/dist/async.js:906:16
    at MemoryFileSystem.writeFile (/Users/ll/project/web/mpa-simple/node_modules/memory-fs/lib/MemoryFileSystem.js:328:9)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `node build/dev-server.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

项目是直接用lavas init 创建的多页模板,什么都没改直接运行 npm run dev 就报错了。
各个模块的版本为:

npm: 5.3.0
lavas: 1.0.7
node: 8.4.0

lint 有一堆的错误

我觉得吧,既然是demo,跑起来最好不要有错误,实在不行可以放宽校验的标准吧,😄😄😄

fecs INFO src/App.vue (3 messages)
fecs ERROR → line 55, col 1: Missing JSDoc @file. (fecs-valid-jsdoc)
fecs ERROR → line 55, col 1: Missing JSDoc @author. (fecs-valid-jsdoc)
fecs ERROR → line 55, col 1: Expected file extension js or jsx or es but found vue. (fecs-esnext-ext)

fecs INFO src/router.js (5 messages)
fecs ERROR → line 11, col 12: Expected class Home but found ArrowFunctionExpression. (fecs-prefer-class)
fecs ERROR → line 12, col 14: Expected class Detail but found ArrowFunctionExpression. (fecs-prefer-class)
fecs ERROR → line 13, col 16: Expected class NotFound but found ArrowFunctionExpression. (fecs-prefer-class)
fecs ERROR → line 14, col 12: Expected class User but found ArrowFunctionExpression. (fecs-prefer-class)
fecs ERROR → line 15, col 14: Expected class Search but found ArrowFunctionExpression. (fecs-prefer-class)

fecs INFO src/components/AppBottomNavigator.vue (4 messages)
fecs ERROR → line 28, col 1: Missing JSDoc @file. (fecs-valid-jsdoc)
fecs ERROR → line 28, col 1: Missing JSDoc @author. (fecs-valid-jsdoc)
fecs ERROR → line 28, col 1: Expected file extension js or jsx or es but found vue. (fecs-esnext-ext)
fecs WARN → line 39, col 50: Unexpected block statement surrounding arrow body. (fecs-arrow-body-style)

fecs INFO src/components/AppHeader.vue (3 messages)
fecs ERROR → line 47, col 1: Missing JSDoc @file. (fecs-valid-jsdoc)
fecs ERROR → line 47, col 1: Missing JSDoc @author. (fecs-valid-jsdoc)
fecs ERROR → line 47, col 1: Expected file extension js or jsx or es but found vue. (fecs-esnext-ext)

升级到 [email protected]

目前 Lavas 中使用的是 [email protected],存在以下问题:

  1. 开发模式下 service-worker 无法使用,原因是 workbox-webpack-plugin 没有处理开发模式中 webpack 内存文件系统中的静态资源。
  2. 生产环境下引入运行时 workbox-sw 的方式不够灵活。对于用户自定义的 service-worker 模版文件,虽然 Workbox 能根据固定的字符串注入 precache 预缓存资源列表,但是引入这个运行时文件的 importScript 并不是自动生成的,这就带来了下面的问题:
    • 我们目前在编译流程中将这个文件从 node_modules 内拷到 static/js 下。当 publicPath 发生变动时,用户需要在 importScript 处同步手动修改。
    • 当 Workbox 版本升级时,也需要用户手动修改引用路径。所以目前固定了 2.1.2 这个版本。

[email protected] 开始尝试修复这些问题。API 有一些比较大的改动,比如:

  1. 注入 precache 列表不再使用替换固定字符串的方式,而是采用 importScript 引用单独的 precache-manifest 文件
  2. 开发模式下的 service-worker 调试问题,向内存文件系统中正确写入静态资源,我在 SPA 下测试过还是很好用的。
  3. workbox-sw 运行时文件拆分成了多个子模块,但这里有一个问题,Google CDN 无法访问的,所以还是得引用本地文件。最近发布的 3.0.0-alpha-4 版本解决了这个问题,支持使用本地构建好的版本。

所以目前需要针对 SSR 下的场景进一步测试。

lavas生成的模板页面切换效果slide切换方向不正确

出问题的代码如下:

        <transition
            :name="pageTransitionEffect">
            <keep-alive>
                <router-view
                    :key="$route.fullPath"
                    v-if="$route.meta.keepAlive"
                    class="app-view"
                    :class="[pageTransitionClass]"
                    ></router-view>
            </keep-alive>
        </transition>
        <transition
            :name="pageTransitionEffect">
            <router-view
                :key="$route.fullPath"
                v-if="!$route.meta.keepAlive"
                class="app-view"
                :class="[pageTransitionClass]"
                ></router-view>
        </transition>

当前一个页面设置了keep-alive, 后一个没有,就会导致两个view不在同一个animation里,导致动画出错

lavas build 使用的 lavas-core 是全局的,而非项目的,导致无法更新

let lavasConf = require(path.resolve(rootDir, 'package.json')).lavas || {};

let LavasCore = require(lavasConf.core || 'lavas-core-vue');
let core = new LavasCore(rootDir);

lavas-cli/src/commander/build/build.js 的代码片段可以看出,在运行 lavas build 命令时,是直接 require('lavas-core-vue')。而一般 lavas 都是全局安装的,这就导致全局中还有一份 lavas-core-vue。

lavas devlavas server 都是调用项目内部的 server.dev.jsserver.prod.js,所以引用的是项目内的 lavas-core-vue。

这样的不一致会导致 两个问题

  1. 对 lavas 内核开发者来说,如果要使用 npm link ,需要在两处 link,容易遗漏,影响开发进度。
  2. 对普通开发者来说,如果 lavas-core-vue 有更新,而全局 lavas 又没有更新的情况下,开发者只能更新项目里的 lavas-core-vue,而无法更新全局的那一个。这就导致一些新功能在执行 lavas build 命令时有出错的可能。

解决方案
lavas build 向另外两条命令靠拢,调用项目内部的 js 作为入口。而为了不再增加项目根目录下的文件,决定增加 .lavas/build.js,由系统自动生成。
如果没有这个文件,则依然维持原状使用全局的,为了兼容考虑。

Lavas-core 提供更加灵活的 API

目前 Lavas 提供 express/koaMiddleware 封装了一系列中间件,供开发和生产环境使用:
app.use(core.koaMiddleware())

这样做存在以下局限性:

  1. 内置的中间件用户无法替换,例如线上可能并不需要使用 serve-static 处理静态资源
  2. 在 SSR 模式下,参考 NuxtrenderRoute 方法。虽然 Nuxt 关于这个方法的建议是仅用于测试。个人理解这样确实存在一些局限性,毕竟执行中间件时,bundleRenderer 已经创建完毕,某些创建时的操作例如修改 html 模版是无法做到的。但如果用户能获得 render 方法,就可以自定义 SSR 中间件,例如对上下文对象进行一些自定义处理后再交给 bundleRenderer 渲染,还是存在一些应用场景的。

所以核心问题其实是内置的中间件需要让用户可配置。大致进行了以下修改:
express/koaMiddleware() 可以通过参数选择使用部分 Lavas 内置中间件:

app.use(core.expressMiddleware([
    'favicon',
    'static',
    'service-worker',
    // 'ssr', // 不使用 ssr 中间件
    'error'
]));
// 配合 `render` 自定义 ssr 中间件
app.use((req, res, next) => {
    core.render({
        url: req.url
    }).then(result => {
        if (result.err) {
            return next(result.err);
        }
        res.end(result.html);
    });
});

后续在文档中,我们会详细介绍内部使用了哪些中间件。

有关icons的管理

官方:room
请问,在哪里可以看得到官方提供的所有font-icon?
如果新增又需要注意什么才不会影响官方提供的,并且使用方式跟官方的一致?

全局事件疑问

在A页面上通过setAppHeader定义了action,是不是意味着在所有页面都能监听到这个事件?我在某个页面上的操作应该是针对这个页面组件的,为什么要搞成全局事件呢?如果因为壳子没办法,怎么区分不同页面上产生的action动作?

Service Worker 影响页面无法加载

qq 20180119113704

判断为 Service Worker 影响。查看文件,发现预缓存文件的路径和实际注册的 navigationRoute 是不一致的。

a304f1f36a82dcfe3bcaffa8e1e7d16d

c9f18eaf3492fb400254d7cca2416103

核心原因是,最后那句 navigationRoute 是 Lavas 生成的,而生成时没有考虑 router base。

ssr 无限循环

复现步骤:

  1. lavas init 选择 AppShell 模板,ssr 默认为 true
  2. 安装 less 的依赖库 cnpm install --save-dev less-loader less
  3. 修改 core/App.vue 文件,增加一段 less 文件,如下
  4. 等待编译完成,删除这段 less 样式,就会出现无限循环
<style lang="less">
body {
    background-color: red;
}
</style>

命令行工具体验问题

下载模板或者其他配置的时候,能不能给个提示显示下载什么内容或者进度,否则在等待的时候很懵逼

SPA项目构建后无法快速启动

SSR项目构建后可以通过命令lavas start或者node server.prod.js快速启动,因为它包含一个express/koa服务器

但SPA项目构建后是静态文件,因此无法快速启动,需要用户手动搭建服务器配置并转发路由。

为了满足开发者快速预览构建后的SPA项目,Lavas应当提供相关功能

增加自定义配置文件

Lavas 默认读取项目根目录下的 lavas.config.js 作为配置文件启动项目。

如果开发者希望修改某项配置并查看其效果,目前的做法是修改 lavas.config.js 并重新启动 (lavas dev) 或者构建 (lavas build) 项目,这样会导致来回修改和重复的启动/构建。

Lavas 最新版本 (lavas 2.2.2) 提供了 config 配置项,开发者可以通过例如 lavas dev lavas.another.config.js
来实现不修改本身配置文件的情况下使用其他配置文件启动项目。lavas build 也支持该语法。

lavas dev后报错

按照官网的提示操作lavas dev时,报以下错误

ReferenceError: DEFAULT_ENTRY_NAME is not defined
    at DevBuilder.addSkeletonRoutes (/Users/mac/Desktop/cx-project/project/my-demo/4-demo/pwa-project/node_modules/[email protected]@lavas/dist/core/builder/dev-builder.js:130:25)
    at DevBuilder._callee4$ (/Users/mac/Desktop/cx-project/project/my-demo/4-demo/pwa-project/node_modules/[email protected]@lavas/dist/core/builder/dev-builder.js:346:36)
    at tryCatch (/Users/mac/Desktop/cx-project/project/my-demo/4-demo/pwa-project/node_modules/[email protected]@regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (/Users/mac/Desktop/cx-project/project/my-demo/4-demo/pwa-project/node_modules/[email protected]@regenerator-runtime/runtime.js:296:22)
    at Generator.prototype.(anonymous function) [as next] (/Users/mac/Desktop/cx-project/project/my-demo/4-demo/pwa-project/node_modules/[email protected]@regenerator-runtime/runtime.js:114:21)
    at step (/Users/mac/Desktop/cx-project/project/my-demo/4-demo/pwa-project/node_modules/[email protected]@babel-runtime/helpers/asyncToGenerator.js:17:30)
    at /Users/mac/Desktop/cx-project/project/my-demo/4-demo/pwa-project/node_modules/[email protected]@babel-runtime/helpers/asyncToGenerator.js:28:13

尝试了Basic和AppShell都会报这个错误

环境
mac
node.js v7.2.1
npm 3.10.10
LAVAS INFO version: 2.1.0-rc.5

npm run dev error

> [email protected] dev C:\Users\17339\pwa-project
> node build/dev-server.js

npm WARN invalid config loglevel="notice"
> Starting dev server...
Generate skeleton for skeleton-undefined...
(node:9748) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration misses the property 'entry'.
   object { <key>: non-empty string | [non-empty string] } | non-empty string | [non-empty string] | function
   The entry point(s) of the compilation.
C:\Users\17339\pwa-project>node -v
v6.9.1

C:\Users\17339\pwa-project>lavas -v
LAVAS INFO version:  1.0.7

C:\Users\17339\pwa-project>npm -v
5.3.0

用 cli 创建的,一行代码都没改,就报错了。

支持 SSR 应用在指定的 Route 上

针对部分 Route 应用 SSR 好处:

  1. 减轻服务器压力。对于 User-specific 的网页可以不需要SSR,比如类似”个人中心“的页面。尤其对于PC端网站,除了为SEO应用SSR,其它场景都可以把渲染的工作放到Client-Side。
  2. 很多第三方插件不支持SSR,一个解决方案是将引用这些插件的页面禁用SSR,比如 Quill 富文本编辑器(纯编辑功能的页面完全不需要SSR)。

希望 SSR 模板支持这个特性,谢谢!

直接npm安装的js-beautify不完整

使用app-shell模板创建的基础工程dev跑不起来,发现缺少模块。npm i 安装后js-beautify目录下只有js一个文件夹,缺少大部分依赖,然后直接去主页下了一个怼到了module里。。
(话说好像这不是你们的锅。。)

Error 500 service worker response error

在某些手机里连续刷新几次之后,会报错卡死在Skeleton页面,再打开还是卡死状态,要清除缓存才能恢复。

手机品牌:oppo R9s
android版本:6.0.1
web内核:Chrome/63.0.3239.83
报错:Failed to load resource: the server responded with a status of 500 (Service Worker Response Error)

service_worker

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.