fix: 修复单页应用进首页会加载全部资源文件

* fix: 修复单页应用进首页会加载全部资源文件 * fix: 修改测试项 * fix: 修复public/index.html无效问题 * fix: 修复缺少括号语法错误 * fix: 测试项增加prefetch Co-authored-by: juvham <juvham@foxmail.com>
remaxjs · Nov 27, 2020 · bb4a0f5 · bb4a0f5 · vercel · Nov 27, 2020
1 parent 6c92ff7
commit bb4a0f5
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 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
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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -28,11 +28,11 @@ export default function createApp(options: BootstrapOptions, history: History) {
                 {(props: any) => {
                   const pageComponent = async
                     ? loadable<any>(() =>
-                        (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
@@ -13,7 +13,7 @@ export interface BootstrapOptions {
   appComponent: React.ComponentType;
   appConfig: AppConfig;
   plugins?: any[];
-  pageComponents: Array<Promise<{ default: React.ComponentType }> | React.ComponentType>;
+  pageComponents: Array<() => Promise<{ default: React.ComponentType }> | React.ComponentType>;
   pages: Page[];
 }