From bb4a0f5e4b44b9dd1068dddc5887213174e35de9 Mon Sep 17 00:00:00 2001 From: Juvham Date: Fri, 27 Nov 2020 10:00:42 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=8D=95=E9=A1=B5?= =?UTF-8?q?=E5=BA=94=E7=94=A8=E8=BF=9B=E9=A6=96=E9=A1=B5=E4=BC=9A=E5=8A=A0?= =?UTF-8?q?=E8=BD=BD=E5=85=A8=E9=83=A8=E8=B5=84=E6=BA=90=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 修复单页应用进首页会加载全部资源文件 * fix: 修改测试项 * fix: 修复public/index.html无效问题 * fix: 修复缺少括号语法错误 * fix: 测试项增加prefetch Co-authored-by: juvham --- .../fixtures/web/expected/index.js | 8 ++++-- .../fixtures/web/expected/runtime.js | 25 ++++++++++++++++--- .../remax-cli/src/build/entries/SpaEntry.ts | 10 +++++++- .../src/build/webpack/config.web.mpa.ts | 5 +++- .../remax-cli/src/build/webpack/config.web.ts | 5 +++- .../src/__tests__/createApp.test.tsx | 10 ++++---- packages/remax-web/src/createApp.tsx | 4 +-- packages/remax-web/src/types/index.ts | 2 +- 8 files changed, 52 insertions(+), 17 deletions(-) diff --git a/packages/remax-cli/src/__tests__/integration/fixtures/web/expected/index.js b/packages/remax-cli/src/__tests__/integration/fixtures/web/expected/index.js index c9058def4..30fa78787 100644 --- a/packages/remax-cli/src/__tests__/integration/fixtures/web/expected/index.js +++ b/packages/remax-cli/src/__tests__/integration/fixtures/web/expected/index.js @@ -38,7 +38,11 @@ Object(_remax_web__WEBPACK_IMPORTED_MODULE_1__["bootstrap"])({ "route": "pages/index/index2", "config": {} }], - pageComponents: [Promise.all(/* import() | pages/index/index */[__webpack_require__.e(2), __webpack_require__.e(3)]).then(__webpack_require__.bind(null, 8)), Promise.all(/* import() | pages/index/index2 */[__webpack_require__.e(2), __webpack_require__.e(4)]).then(__webpack_require__.bind(null, 11))], + pageComponents: [function () { + return Promise.all(/* import() | pages/index/index */[__webpack_require__.e(2), __webpack_require__.e(3)]).then(__webpack_require__.bind(null, 8)); + }, function () { + return Promise.all(/* import() | pages/index/index2 */[__webpack_require__.e(2), __webpack_require__.e(4)]).then(__webpack_require__.bind(null, 11)); + }], plugins: [] }); @@ -99,4 +103,4 @@ module.exports = require("@remax/web/assets/app.css"); module.exports = require("remax"); /***/ }) -],[[0,0]]]); \ No newline at end of file +],[[0,0]],[2,3,4]]); \ No newline at end of file diff --git a/packages/remax-cli/src/__tests__/integration/fixtures/web/expected/runtime.js b/packages/remax-cli/src/__tests__/integration/fixtures/web/expected/runtime.js index e090dfacb..438cfe338 100644 --- a/packages/remax-cli/src/__tests__/integration/fixtures/web/expected/runtime.js +++ b/packages/remax-cli/src/__tests__/integration/fixtures/web/expected/runtime.js @@ -4,7 +4,7 @@ /******/ var chunkIds = data[0]; /******/ var moreModules = data[1]; /******/ var executeModules = data[2]; -/******/ +/******/ var prefetchChunks = data[3] || []; /******/ // add "moreModules" to the modules object, /******/ // then flag all "chunkIds" as loaded and fire callback /******/ var moduleId, chunkId, i = 0, resolves = []; @@ -21,7 +21,7 @@ /******/ } /******/ } /******/ if(parentJsonpFunction) parentJsonpFunction(data); -/******/ +/******/ deferredPrefetch.push.apply(deferredPrefetch, prefetchChunks); /******/ while(resolves.length) { /******/ resolves.shift()(); /******/ } @@ -46,7 +46,24 @@ /******/ result = __webpack_require__(__webpack_require__.s = deferredModule[0]); /******/ } /******/ } -/******/ +/******/ if(deferredModules.length === 0) { +/******/ // chunk prefetching for javascript +/******/ deferredPrefetch.forEach(function(chunkId) { +/******/ if(installedChunks[chunkId] === undefined) { +/******/ installedChunks[chunkId] = null; +/******/ var link = document.createElement('link'); +/******/ +/******/ if (__webpack_require__.nc) { +/******/ link.setAttribute("nonce", __webpack_require__.nc); +/******/ } +/******/ link.rel = "prefetch"; +/******/ link.as = "script"; +/******/ link.href = jsonpScriptSrc(chunkId); +/******/ document.head.appendChild(link); +/******/ } +/******/ }); +/******/ deferredPrefetch.length = 0; +/******/ } /******/ return result; /******/ } /******/ @@ -65,7 +82,7 @@ /******/ 0: 0 /******/ }; /******/ -/******/ var deferredModules = []; +/******/ var deferredModules = [], deferredPrefetch = []; /******/ /******/ // script path function /******/ function jsonpScriptSrc(chunkId) { diff --git a/packages/remax-cli/src/build/entries/SpaEntry.ts b/packages/remax-cli/src/build/entries/SpaEntry.ts index 3502c536f..c1811c42c 100644 --- a/packages/remax-cli/src/build/entries/SpaEntry.ts +++ b/packages/remax-cli/src/build/entries/SpaEntry.ts @@ -27,7 +27,15 @@ export default class SpaEntry extends VirtualEntry { )}, pageComponents: [ ${Array.from(this.builder.entryCollection.entries.values()) - .map(entry => `import(/* webpackChunkName: "${entry.name}" */'${entry.filename}')`) + .map( + entry => `function() { + return import( + /* webpackPrefetch: true */ + /* webpackChunkName: "${entry.name}" */ + '${entry.filename}' + ) +}` + ) .join(',')} ], plugins: [ diff --git a/packages/remax-cli/src/build/webpack/config.web.mpa.ts b/packages/remax-cli/src/build/webpack/config.web.mpa.ts index f75c6830c..2f7ec8662 100644 --- a/packages/remax-cli/src/build/webpack/config.web.mpa.ts +++ b/packages/remax-cli/src/build/webpack/config.web.mpa.ts @@ -1,4 +1,5 @@ import * as path from 'path'; +import * as fs from 'fs'; import * as webpack from 'webpack'; import Config from 'webpack-chain'; import HtmlWebpackPlugin from 'html-webpack-plugin'; @@ -20,7 +21,9 @@ export default function webpackConfig(builder: Builder): webpack.Configuration { { filename: entry.name + '.html', chunks: [entry.name], - template: path.resolve(__dirname, '../../../template/index.html.ejs'), + template: fs.existsSync(path.join(builder.projectPath.publicDir(), '/index.html')) + ? path.join(builder.projectPath.publicDir(), '/index.html') + : path.resolve(__dirname, '../../../template/index.html.ejs'), env: process.env.NODE_ENV, }, ]); diff --git a/packages/remax-cli/src/build/webpack/config.web.ts b/packages/remax-cli/src/build/webpack/config.web.ts index d85456aa4..2f43a6fdc 100644 --- a/packages/remax-cli/src/build/webpack/config.web.ts +++ b/packages/remax-cli/src/build/webpack/config.web.ts @@ -1,4 +1,5 @@ import * as path from 'path'; +import * as fs from 'fs'; import * as webpack from 'webpack'; import Config from 'webpack-chain'; import HtmlWebpackPlugin from 'html-webpack-plugin'; @@ -32,7 +33,9 @@ export default function webpackConfig(builder: Builder): webpack.Configuration { config.plugin('html-webpack-plugin').use(HtmlWebpackPlugin, [ { - template: path.resolve(__dirname, '../../../template/index.html.ejs'), + template: fs.existsSync(path.join(builder.projectPath.publicDir(), '/index.html')) + ? path.join(builder.projectPath.publicDir(), '/index.html') + : path.resolve(__dirname, '../../../template/index.html.ejs'), env: process.env.NODE_ENV, }, ]); diff --git a/packages/remax-web/src/__tests__/createApp.test.tsx b/packages/remax-web/src/__tests__/createApp.test.tsx index 46ca5985e..1691108ab 100644 --- a/packages/remax-web/src/__tests__/createApp.test.tsx +++ b/packages/remax-web/src/__tests__/createApp.test.tsx @@ -20,7 +20,7 @@ describe('createApp', () => { appConfig: { pages: ['pages/foo'], }, - pageComponents: [createPage('foo'), createPage('bar')], + pageComponents: [() => createPage('foo'), () => createPage('bar')], pages: [ { route: 'pages/foo', @@ -51,7 +51,7 @@ describe('createApp', () => { defaultTitle: 'remax', }, }, - pageComponents: [createPage('index')], + pageComponents: [() => createPage('index')], pages: [ { route: 'pages/index', @@ -77,7 +77,7 @@ describe('createApp', () => { defaultTitle: 'remax', }, }, - pageComponents: [createPage('index')], + pageComponents: [() => createPage('index')], pages: [ { route: 'pages/index', @@ -120,7 +120,7 @@ describe('createApp', () => { ], }, }, - pageComponents: [createPage('foo'), createPage('bar')], + pageComponents: [() => createPage('foo'), () => createPage('bar')], pages: [ { route: 'pages/foo', @@ -149,7 +149,7 @@ describe('createApp', () => { appConfig: { pages: ['pages/index'], }, - pageComponents: [createPage('index')], + pageComponents: [() => createPage('index')], pages: [ { route: 'pages/index', diff --git a/packages/remax-web/src/createApp.tsx b/packages/remax-web/src/createApp.tsx index b73ab73f5..707aa2707 100644 --- a/packages/remax-web/src/createApp.tsx +++ b/packages/remax-web/src/createApp.tsx @@ -28,11 +28,11 @@ export default function createApp(options: BootstrapOptions, history: History) { {(props: any) => { const pageComponent = async ? loadable(() => - (pageComponents[i] as Promise<{ default: React.ComponentType }>).then(({ default: c }) => + (pageComponents[i]() as Promise<{ default: React.ComponentType }>).then(({ default: c }) => createPageConfig(c, page.route) ) ) - : createPageConfig(pageComponents[i] as React.ComponentType, page.route); + : createPageConfig(pageComponents[i]() as React.ComponentType, page.route); return React.createElement(pageComponent, { ...props, pageConfig: { diff --git a/packages/remax-web/src/types/index.ts b/packages/remax-web/src/types/index.ts index 611932330..f5ceaa4af 100644 --- a/packages/remax-web/src/types/index.ts +++ b/packages/remax-web/src/types/index.ts @@ -13,7 +13,7 @@ export interface BootstrapOptions { appComponent: React.ComponentType; appConfig: AppConfig; plugins?: any[]; - pageComponents: Array | React.ComponentType>; + pageComponents: Array<() => Promise<{ default: React.ComponentType }> | React.ComponentType>; pages: Page[]; }