Merge pull request #6617 from alibaba/release/next

* feat: support first chunk cache (#6607) * feat: support first chunk cache * chore: remove cacheFirstChunk * chore: modify fcc comment * feat: add FirstChunkCache function * feat: add first chunk demo * chore: modify example * chore: update lock * chore: update package * fix: support transform plugin in speedup mode (#6615) * fix: support tranform plugin in speedup mode * chore: lint * chore: remove log * chore: modify file name (#6619) * chore: modify file name * chore: modify lock * fix: data loader output (#6622) * fix: data loader output * fix: check support let first * chore: add changelog * fix(@ice/app): requireHook in createService (#6633) * fix: assets rule in speedup mode (#6632) * fix: do not minify assets in public by default (#6631) * chore: update versions (#6618) --------- Co-authored-by: 染陌同学 <[email protected]> Co-authored-by: 水澜 <[email protected]> Co-authored-by: Linbudu <[email protected]>
alibaba · Nov 13, 2023 · 148e8ab · 148e8ab
2 parents 1e1b543 + 1b7ba15
commit 148e8ab
Show file tree

Hide file tree

Showing 39 changed files with 539 additions and 93 deletions.
diff --git a/examples/with-first-chunk-cache-ssr/ice.config.mts b/examples/with-first-chunk-cache-ssr/ice.config.mts
@@ -0,0 +1,5 @@
+import { defineConfig } from '@ice/app';
+
+export default defineConfig({
+  ssr: true,
+});
diff --git a/examples/with-first-chunk-cache-ssr/ice.png b/examples/with-first-chunk-cache-ssr/ice.png
diff --git a/examples/with-first-chunk-cache-ssr/package.json b/examples/with-first-chunk-cache-ssr/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "@examples/with-first-chunk-cache-ssr",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "start": "ice start",
+    "build": "ice build"
+  },
+  "description": "ICE example with first chunk cache ssr",
+  "author": "ICE Team",
+  "license": "MIT",
+  "dependencies": {
+    "@ice/app": "workspace:*",
+    "@ice/runtime": "workspace:*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6"
+  }
+}
diff --git a/examples/with-first-chunk-cache-ssr/public/favicon.ico b/examples/with-first-chunk-cache-ssr/public/favicon.ico
diff --git a/examples/with-first-chunk-cache-ssr/src/app.tsx b/examples/with-first-chunk-cache-ssr/src/app.tsx
@@ -0,0 +1,10 @@
+import { defineAppConfig } from 'ice';
+
+export default defineAppConfig({
+  app: {
+    rootId: 'app',
+  },
+  cache: {
+    firstChunk: true,
+  },
+});
diff --git a/examples/with-first-chunk-cache-ssr/src/components/Box/index.module.css b/examples/with-first-chunk-cache-ssr/src/components/Box/index.module.css
@@ -0,0 +1,11 @@
+.box {
+  display: flex;
+  width: 100%;
+  height: 100px;
+  flex-direction: row;
+  background-color: white;
+}
+
+.item {
+  flex: 1;
+}
diff --git a/examples/with-first-chunk-cache-ssr/src/components/Box/index.tsx b/examples/with-first-chunk-cache-ssr/src/components/Box/index.tsx
@@ -0,0 +1,44 @@
+import { useSuspenseData, withSuspense } from 'ice';
+import logo from '../../../ice.png';
+import styles from './index.module.css';
+
+const Item = withSuspense((props) => {
+  console.log('Render: Item');
+
+  return (
+    (<div className={styles.item}>
+      <img src={props.src} height="100" width="100" />
+    </div>)
+  );
+});
+
+function Box() {
+  const data = useSuspenseData(getData);
+  console.log('Render: Box');
+
+  return (
+    <div className={styles.box}>
+      {
+        data.map((item, index) => {
+          return <Item id="Item" key={index} src={item} />;
+        })
+      }
+    </div>
+  );
+}
+
+export default withSuspense(Box);
+
+async function getData() {
+  console.log('load box');
+
+  await new Promise<any>((resolve) => {
+    setTimeout(() => resolve(null), 1000);
+  });
+
+  return [
+    logo,
+    logo,
+    logo,
+  ];
+}
diff --git a/examples/with-first-chunk-cache-ssr/src/components/List/index.module.css b/examples/with-first-chunk-cache-ssr/src/components/List/index.module.css
@@ -0,0 +1,18 @@
+.list {
+  background-color: rgba(0,0,0,.03);
+}
+
+.item{
+  padding: 20px;
+  background-color: aliceblue;
+  margin: 20px;
+  display: flex;
+}
+
+.image {
+  padding: 10px;
+}
+
+.title {
+  padding: 15px 0px;
+}
diff --git a/examples/with-first-chunk-cache-ssr/src/components/List/index.tsx b/examples/with-first-chunk-cache-ssr/src/components/List/index.tsx
@@ -0,0 +1,75 @@
+import { useSuspenseData, withSuspense } from 'ice';
+import logo from '../../../ice.png';
+import styles from './index.module.css';
+
+const Item = withSuspense((props) => {
+  console.log('Render: List');
+
+  return (
+    (<div className={styles.item} >
+      <img className={styles.image} src={props.src} alt="logo" height="100" width="100" />
+      <div>
+        <div className={styles.title}>{props.title}</div>
+        <div>{props.description}</div>
+      </div>
+    </div>)
+  );
+});
+
+function List() {
+  const data = useSuspenseData(getData);
+  console.log('Render: List');
+
+  return (
+    <div className={styles.list}>
+      {
+        data.map(item => {
+          return (<Item
+            id="Item"
+            description={item.description}
+            src={item.logo}
+            title={item.title}
+          />);
+        })
+      }
+    </div>
+  );
+}
+
+export default withSuspense(List);
+
+async function getData() {
+  console.log('load list');
+
+  await new Promise<any>((resolve) => {
+    setTimeout(() => resolve(null), 2000);
+  });
+
+  return [
+    {
+      logo,
+      title: 'ice.js',
+      description: '这是 ICE 框架',
+    },
+    {
+      logo,
+      title: 'ice.js',
+      description: '这是 ICE 框架',
+    },
+    {
+      logo,
+      title: 'ice.js',
+      description: '这是 ICE 框架',
+    },
+    {
+      logo,
+      title: 'ice.js',
+      description: '这是 ICE 框架',
+    },
+    {
+      logo,
+      title: 'ice.js',
+      description: '这是 ICE 框架',
+    },
+  ];
+}
diff --git a/examples/with-first-chunk-cache-ssr/src/document.tsx b/examples/with-first-chunk-cache-ssr/src/document.tsx
@@ -0,0 +1,22 @@
+import { Meta, Title, Links, Main, Scripts } from 'ice';
+
+function Document() {
+  return (
+    <html>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="description" content="ICE 3.0 Demo" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Title />
+        <Links />
+      </head>
+      <body>
+        <Main />
+        <Scripts async />
+      </body>
+    </html>
+  );
+}
+
+export default Document;
diff --git a/examples/with-first-chunk-cache-ssr/src/pages/index.module.css b/examples/with-first-chunk-cache-ssr/src/pages/index.module.css
@@ -0,0 +1,63 @@
+.app {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  overflow-x: hidden;
+}
+
+.app > header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+} 
+
+.app > header > img {
+  width: 120px;
+}
+
+.app > header > p {
+  margin: 20px 0;
+  text-align: center;
+  font-size: 2.6rem;
+}
+
+.app > main {
+  display: flex;
+  flex-direction: column;
+  margin: 20px 0 10px;
+  font-size: 0.9rem;
+}
+
+.boxFallback {
+  background: rgba(0,0,0,.03);
+  border-radius: 3.2vw;
+  height: 100px;
+}
+
+.header {
+  background: linear-gradient(to bottom right, rgb(2, 46, 244), rgb(46, 40, 150));
+  height: 100px;
+  width: 100%;
+  font-size: 22px;
+  align-items: center;
+  line-height: 100px;
+  text-align: center;
+  color: #FFF;
+}
+
+.link {
+  font-size: 1.2rem;
+  color: var(--primary);
+}
+
+.button {
+  outline: none;
+  border: none;
+  border-radius: 8px;
+  padding: 10px 35px;
+  background: var(--primary);
+  box-shadow: 0 5px 10px 0 #ddd;
+  font-size: calc(10px + 2vmin);
+}
diff --git a/examples/with-first-chunk-cache-ssr/src/pages/index.tsx b/examples/with-first-chunk-cache-ssr/src/pages/index.tsx
@@ -0,0 +1,26 @@
+import styles from './index.module.css';
+import List from '@/components/List/index';
+import Box from '@/components/Box/index';
+
+
+export default function Home() {
+  console.log('Render: Home');
+
+  return (
+    <div>
+      <Header />
+      <Box id="Box" fallback={<div className={styles.boxFallback} />} />
+      <List id="List" fallback={<div className={styles.boxFallback} />} />
+      {/* https://github.com/xiaoxiaojx/blog/issues/37 */}
+      <div dangerouslySetInnerHTML={{ __html: '<div style="height:0;width:0;">\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b\u200b</div>' }} />
+    </div>
+  );
+}
+
+function Header() {
+  return (
+    <div className={styles.header} >
+      First chunk Demo
+    </div>
+  );
+}
diff --git a/examples/with-first-chunk-cache-ssr/src/typings.d.ts b/examples/with-first-chunk-cache-ssr/src/typings.d.ts
@@ -0,0 +1 @@
+/// <reference types="@ice/app/types" />
diff --git a/examples/with-first-chunk-cache-ssr/tsconfig.json b/examples/with-first-chunk-cache-ssr/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "buildOnSave": false,
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "build",
+    "module": "esnext",
+    "target": "esnext",
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "lib": ["es6", "dom"],
+    "sourceMap": true,
+    "allowJs": true,
+    "rootDir": "./",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": false,
+    "importHelpers": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true,
+    "skipLibCheck": true,
+    "paths": {
+      "@/*": ["./src/*"],
+      "ice": [".ice"]
+    }
+  },
+  "include": ["src", ".ice", "ice.config.*"],
+  "exclude": ["build", "public"]
+}
diff --git a/packages/bundles/CHANGELOG.md b/packages/bundles/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.1.17
+
+### Patch Changes
+
+- d4aaa580: fix: support custom transform plugins in speedup mode
+
 ## 0.1.16
 
 ### Patch Changes

diff --git a/packages/bundles/package.json b/packages/bundles/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ice/bundles",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "license": "MIT",
   "author": "ICE",
   "description": "Basic dependencies for ice.",
@@ -71,7 +71,7 @@
     "webpack": "5.88.2",
     "webpack-bundle-analyzer": "4.5.0",
     "webpack-dev-server": "4.15.0",
-    "unplugin": "0.9.5",
+    "unplugin": "1.5.0",
     "bonjour-service": "^1.0.13",
     "colorette": "^2.0.10",
     "compression": "^1.7.4",

diff --git a/packages/bundles/scripts/tasks.ts b/packages/bundles/scripts/tasks.ts
@@ -86,6 +86,22 @@ const tasks = [
     file: 'node_modules/unplugin/dist/webpack/loaders/load.js',
     bundleName: 'webpack/loaders/load.js',
   },
+  {
+    pkgName: 'unplugin',
+    declaration: false,
+    emptyDir: false,
+    externals: taskExternals,
+    file: 'node_modules/unplugin/dist/rspack/loaders/transform.js',
+    bundleName: 'rspack/loaders/transform.js',
+  },
+  {
+    pkgName: 'unplugin',
+    declaration: false,
+    emptyDir: false,
+    externals: taskExternals,
+    file: 'node_modules/unplugin/dist/rspack/loaders/load.js',
+    bundleName: 'rspack/loaders/load.js',
+  },
   {
     // pack main package
     pkgName: 'fork-ts-checker-webpack-plugin',