forked from lavas-project/lavas
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: lavas-project#73 (lavas-project#91)
* When using `skeleton` and `cssExtract`, use `<link rel=preload>` to load CSS asynchronously instead of `<link rel=stylesheet>`, which will let browser render Skeleton earlier (lavas-project#73). * lavas-template-basic/appshell also modified. * All test cases can run concurrently.
- Loading branch information
Showing
29 changed files
with
720 additions
and
225 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
21 changes: 21 additions & 0 deletions
21
packages/lavas-core-vue/core/plugins/ommit-css-webpack-plugin.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| /** | ||
| * @file OmmitCSSPlugin | ||
| * @author panyuqi | ||
| * @desc filter css | ||
| */ | ||
|
|
||
| export default class OmmitCSSPlugin { | ||
| constructor() {} | ||
|
|
||
| apply(compiler) { | ||
| compiler.plugin('compilation', (compilation) => { | ||
| compilation.plugin( | ||
| 'html-webpack-plugin-alter-asset-tags', | ||
| (args, cb) => { | ||
| args.head = args.head.filter((link) => link.attributes.rel !== 'stylesheet'); | ||
| cb(null, args); | ||
| } | ||
| ); | ||
| }); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -28,19 +28,17 @@ export function getWorkboxFiles(isProd) { | |
| * | ||
| * @param {Object} webpackConfig webpack config | ||
| * @param {Object} lavasConfig lavas config | ||
| * @param {?Object} entryConfig entry config (undefined when SPA and SSR) | ||
| */ | ||
| export function useWorkbox(webpackConfig, lavasConfig, entryConfig) { | ||
| let {buildVersion, build: {publicPath, ssr}, globals, router: {base = '/'}} = lavasConfig; | ||
| let workboxConfig = entryConfig ? entryConfig.serviceWorker : lavasConfig.serviceWorker; | ||
| export function useWorkbox(webpackConfig, lavasConfig) { | ||
| let { | ||
| buildVersion, | ||
| build: {publicPath, ssr}, | ||
| globals, | ||
| router: {base = '/'}, | ||
| serviceWorker: workboxConfig | ||
| } = lavasConfig; | ||
| let {swSrc, appshellUrl, appshellUrls} = workboxConfig; | ||
|
|
||
| if (entryConfig) { | ||
| swSrc = getEntryConfigValue(swSrc, entryConfig.name); | ||
| workboxConfig.swDest = getEntryConfigValue(workboxConfig.swDest, entryConfig.name); | ||
| workboxConfig.swPath = getEntryConfigValue(workboxConfig.swPath, entryConfig.name); | ||
| } | ||
|
|
||
| if (base !== '/' && !base.endsWith('/')) { | ||
| base += '/'; | ||
| } | ||
|
|
@@ -79,8 +77,7 @@ export function useWorkbox(webpackConfig, lavasConfig, entryConfig) { | |
| } | ||
| } | ||
| else { | ||
| let entryHtml = entryConfig ? `${entryConfig.name}.html` : 'index.html'; | ||
| registerNavigationClause = `workboxSW.router.registerNavigationRoute('${base}${entryHtml}');`; | ||
| registerNavigationClause = `workboxSW.router.registerNavigationRoute('${base}index.html');`; | ||
| } | ||
|
|
||
| if (!/workboxSW\.router\.registerNavigationRoute/.test(serviceWorkerContent)) { | ||
|
|
@@ -95,24 +92,10 @@ export function useWorkbox(webpackConfig, lavasConfig, entryConfig) { | |
|
|
||
|
|
||
| // write new service worker in .lavas/sw.js | ||
| let tempSwSrc = entryConfig | ||
| ? join(globals.rootDir, './.lavas', entryConfig.name, 'sw-temp.js') | ||
| : join(globals.rootDir, './.lavas', 'sw-temp.js'); | ||
| let tempSwSrc = join(globals.rootDir, './.lavas', 'sw-temp.js'); | ||
| writeFileSync(tempSwSrc, serviceWorkerContent, 'utf8'); | ||
| workboxConfig.swSrc = tempSwSrc; | ||
|
|
||
| // use [email protected] | ||
| webpackConfig.plugin('workbox').use(WorkboxWebpackPlugin, [workboxConfig]); | ||
| } | ||
|
|
||
| /** | ||
| * replace [entryName] with real value | ||
| * entries/[entryName]/service-worker.js => entries/index/service-worker.js | ||
| * | ||
| * @param {string} value sericeWorker config value | ||
| * @param {string} entryName entry name | ||
| * @return {string} real value | ||
| */ | ||
| function getEntryConfigValue(value, entryName) { | ||
| return value ? value.replace(/\[entryName\]/g, entryName) : undefined; | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,10 @@ | ||
| /** | ||
| * @file client entry | ||
| * @author *__ author __*{% if: *__ email __* %}(*__ email __*){% /if %} | ||
| * @author xiaoiver([email protected]) | ||
| */ | ||
|
|
||
| import Vue from 'vue'; | ||
| import {getMiddlewares, execSeries, getClientContext} from '@/core/middleware'; | ||
| import {getMiddlewares, execSeries, getClientContext} from '@/.lavas/middleware'; | ||
| import lavasConfig from '@/.lavas/config'; | ||
| import {createApp} from './app'; | ||
| import ProgressBar from '@/components/ProgressBar'; | ||
|
|
@@ -14,7 +14,7 @@ import '@/assets/stylus/main.styl'; | |
|
|
||
| let loading = Vue.prototype.$loading = new Vue(ProgressBar).$mount(); | ||
| let {App, router, store} = createApp(); | ||
| let {ssr, middleware: middConf = {}} = lavasConfig; | ||
| let {build: {ssr, cssExtract}, middleware: middConf = {}, skeleton: {enable: enableSkeleton, asyncCSS}} = lavasConfig; | ||
| let app; | ||
|
|
||
| // Sync with server side state. | ||
|
|
@@ -80,9 +80,23 @@ if (!usingAppshell && ssr) { | |
| }); | ||
| } | ||
| else { | ||
| /** | ||
| * Use async CSS in SPA under following | ||
| * 1. `skeleton.enable` | ||
| * 2. `skeleton.asyncCSS` | ||
| * 3. `build.cssExtract` | ||
| */ | ||
| let enableAsyncCSS = enableSkeleton && asyncCSS && cssExtract; | ||
| window.mountLavas = () => { | ||
| setTimeout(() => app.$mount('#app'), 0); | ||
| }; | ||
| // Fetch data in client side. | ||
| handleAsyncData(); | ||
| app = new App().$mount('#app'); | ||
| app = new App(); | ||
| if (!enableAsyncCSS | ||
| || (enableAsyncCSS && window.STYLE_READY)) { | ||
| window.mountLavas(); | ||
| } | ||
| } | ||
|
|
||
| function handleMiddlewares() { | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.