feat(umi-plugin-react): support config chunks, scripts, headScripts, metas and links

docs/plugin/develop.md

@@ -402,6 +402,10 @@ api.addHTMLScript({
 
 Add a script to the HTML head.
 
+### modifyHTMLChunks
+
+Modify chunks in HTML.
+
 ### modifyHTMLWithAST
 
 Modify the HTML, based on cheerio.

docs/zh/plugin/develop.md

@@ -403,6 +403,10 @@ api.addHTMLScript({
 
 在 HTML 头部添加脚本。
 
+### modifyHTMLChunks
+
+修改 chunks 。
+
 ### modifyHTMLWithAST
 
 修改 HTML，基于 cheerio 。

packages/umi-build-dev/src/PluginAPI.js

@@ -93,6 +93,7 @@ export default class PluginAPI {
       'addHTMLScript',
       'addHTMLStyle',
       'addHTMLHeadScript',
+      'modifyHTMLChunks',
       'onGenerateFiles',
       'onHTMLRebuild',
       'modifyDefaultConfig',

packages/umi-build-dev/src/html/HTMLGenerator.js

@@ -1,5 +1,5 @@
 import assert from 'assert';
-import { join, relative } from 'path';
+import { join, relative, extname } from 'path';
 import { existsSync, readFileSync } from 'fs';
 import isPlainObject from 'is-plain-object';
 import ejs from 'ejs';
@@ -188,18 +188,16 @@ export default class HTMLGenerator {
   }
 
   getHashedFileName(filename) {
-    const isProduction = this.env === 'production';
-    if (isProduction) {
+    // css is optional
+    if (extname(filename) === '.js') {
       assert(
         this.chunksMap[filename],
         `file ${filename} don't exists in chunksMap ${JSON.stringify(
           this.chunksMap,
         )}`,
       );
-      return this.chunksMap[filename];
-    } else {
-      return filename;
     }
+    return this.chunksMap[filename];
   }
 
   getContent(route) {
@@ -246,6 +244,9 @@ export default class HTMLGenerator {
     let scripts = [];
     let styles = [];
     let headScripts = [];
+    let chunks = ['umi'];
+
+    if (this.modifyChunks) chunks = this.modifyChunks(chunks);
 
     let routerBaseStr = JSON.stringify(this.config.base || '/');
     const publicPath = this.publicPath || '/';
@@ -273,8 +274,14 @@ export default class HTMLGenerator {
         ...(setPublicPath ? [`window.publicPath = ${publicPathStr};`] : []),
       ].join('\n'),
     });
-    scripts.push({
-      src: `<%= pathToPublicPath %>${this.getHashedFileName('umi.js')}`,
+
+    chunks.forEach(chunk => {
+      const hashedFileName = this.getHashedFileName(`${chunk}.js`);
+      if (hashedFileName) {
+        scripts.push({
+          src: `<%= pathToPublicPath %>${hashedFileName}`,
+        });
+      }
     });
 
     if (this.modifyMetas) metas = this.modifyMetas(metas);
@@ -286,9 +293,14 @@ export default class HTMLGenerator {
 
     if (this.env === 'development' || this.chunksMap['umi.css']) {
       // umi.css should be the last one stylesheet
-      links.push({
-        rel: 'stylesheet',
-        href: `<%= pathToPublicPath %>${this.getHashedFileName('umi.css')}`,
+      chunks.forEach(chunk => {
+        const hashedFileName = this.getHashedFileName(`${chunk}.css`);
+        if (hashedFileName) {
+          links.push({
+            rel: 'stylesheet',
+            href: `<%= pathToPublicPath %>${hashedFileName}`,
+          });
+        }
       });
     }
 
@@ -322,7 +334,9 @@ ${scripts.length ? this.getScriptsContent(scripts) : ''}
       exportStatic && exportStatic.dynamicRoot
         ? relPathToPublicPath
         : publicPath;
-    html = html.replace(/<%= pathToPublicPath %>/g, pathToPublicPath);
+    html = html
+      .replace(/<%= pathToPublicPath %>/g, pathToPublicPath)
+      .replace(/<%= PUBLIC_PATH %>/g, pathToPublicPath);
 
     if (this.modifyHTML) {
       html = this.modifyHTML(html, { route });

packages/umi-build-dev/src/plugins/commands/dev/createRouteMiddleware.js

@@ -1,4 +1,5 @@
 import getHtmlGenerator from '../getHtmlGenerator';
+import chunksToMap from '../build/chunksToMap';
 
 export default function createRouteMiddleware(service) {
   return (req, res) => {
@@ -8,7 +9,10 @@ export default function createRouteMiddleware(service) {
       res.setHeader('Content-Type', 'text/json');
       res.send(JSON.stringify(service.routes));
     } else {
-      const htmlGenerator = getHtmlGenerator(service);
+      const chunksMap = chunksToMap(service.__chunks);
+      const htmlGenerator = getHtmlGenerator(service, {
+        chunksMap,
+      });
       const content = htmlGenerator.getMatchedContent(path);
       res.setHeader('Content-Type', 'text/html');
       res.send(content);

packages/umi-build-dev/src/plugins/commands/dev/index.js

@@ -105,6 +105,7 @@ export default function(api) {
               startWatch();
             },
             onCompileDone({ isFirstCompile, stats }) {
+              service.__chunks = stats.compilation.chunks;
               service.applyPlugins('onDevCompileDone', {
                 args: {
                   isFirstCompile,

packages/umi-build-dev/src/plugins/commands/getHtmlGenerator.js

@@ -22,6 +22,11 @@ export default (service, opts = {}) => {
     modifyPublicPathStr(str) {
       return str;
     },
+    modifyChunks(memo) {
+      return service.applyPlugins('modifyHTMLChunks', {
+        initialValue: memo,
+      });
+    },
     modifyMetas(memo) {
       return service.applyPlugins('addHTMLMeta', {
         initialValue: memo,

packages/umi-plugin-react/src/index.js

@@ -47,6 +47,13 @@ export default function(api, option) {
     hardSource: () => require('./plugins/hardSource').default,
     pwa: () => require('./plugins/pwa').default,
 
+    // html tags
+    chunks: () => require('./plugins/chunks').default,
+    scripts: () => require('./plugins/scripts').default,
+    headScripts: () => require('./plugins/headScripts').default,
+    links: () => require('./plugins/links').default,
+    metas: () => require('./plugins/metas').default,
+
     // misc
     dva: () => require('./plugins/dva').default,
     locale: () => require('./plugins/locale').default,

packages/umi-plugin-react/src/plugins/chunks.js

@@ -0,0 +1,11 @@
+export default function(api, option) {
+  api.onOptionChange(newOption => {
+    option = newOption;
+    api.rebuildHTML();
+    api.refreshBrowser();
+  });
+
+  api.modifyHTMLChunks(() => {
+    return option;
+  });
+}

packages/umi-plugin-react/src/plugins/headScripts.js

@@ -0,0 +1,11 @@
+export default function(api, option) {
+  api.onOptionChange(newOption => {
+    option = newOption;
+    api.rebuildHTML();
+    api.refreshBrowser();
+  });
+
+  api.addHTMLHeadScript(() => {
+    return option;
+  });
+}

packages/umi-plugin-react/src/plugins/links.js

@@ -0,0 +1,11 @@
+export default function(api, option) {
+  api.onOptionChange(newOption => {
+    option = newOption;
+    api.rebuildHTML();
+    api.refreshBrowser();
+  });
+
+  api.addHTMLLink(() => {
+    return option;
+  });
+}

packages/umi-plugin-react/src/plugins/metas.js

@@ -0,0 +1,11 @@
+export default function(api, option) {
+  api.onOptionChange(newOption => {
+    option = newOption;
+    api.rebuildHTML();
+    api.refreshBrowser();
+  });
+
+  api.addHTMLMeta(() => {
+    return option;
+  });
+}

packages/umi-plugin-react/src/plugins/scripts.js

@@ -0,0 +1,11 @@
+export default function(api, option) {
+  api.onOptionChange(newOption => {
+    option = newOption;
+    api.rebuildHTML();
+    api.refreshBrowser();
+  });
+
+  api.addHTMLScript(() => {
+    return option;
+  });
+}

packages/umi-plugin-react/test/chunks/.umirc.js

@@ -0,0 +1,30 @@
+export default {
+  plugins: [
+    [
+      '../../lib',
+      {
+        dynamicImport: {
+          webpackChunkName: true,
+        },
+        chunks: ['vendors', 'umi'],
+      },
+    ],
+  ],
+  chainWebpack(config) {
+    config.optimization.splitChunks({
+      cacheGroups: {
+        vendors: {
+          name: 'vendors',
+          chunks: 'all',
+          test: /[\\/]node_modules[\\/](react|react-dom|react-router|react-router-dom)/,
+        },
+        commons: {
+          name: 'commons',
+          chunks: 'async',
+          minChunks: 2,
+          minSize: 0,
+        },
+      },
+    });
+  },
+};

packages/umi-plugin-react/test/chunks/a.js

@@ -0,0 +1 @@
+console.log('module a');

packages/umi-plugin-react/test/chunks/package.json

@@ -0,0 +1 @@
+{}

packages/umi-plugin-react/test/chunks/pages/index.css

@@ -0,0 +1,4 @@
+
+.normal {
+  background: #95F279;
+}

packages/umi-plugin-react/test/chunks/pages/index.js

@@ -0,0 +1,10 @@
+import styles from './index.css';
+import '../a';
+
+export default function() {
+  return (
+    <div className={styles.normal}>
+      <h1>Page index</h1>
+    </div>
+  );
+}

packages/umi-plugin-react/test/chunks/pages/users.css

@@ -0,0 +1,4 @@
+
+.normal {
+  background: #7DF279;
+}

packages/umi-plugin-react/test/chunks/pages/users.js

@@ -0,0 +1,10 @@
+import styles from './users.css';
+import '../a';
+
+export default function() {
+  return (
+    <div className={styles.normal}>
+      <h1>Page users</h1>
+    </div>
+  );
+}

packages/umi-plugin-react/test/normal.e2e.js

@@ -43,6 +43,22 @@ describe('normal', () => {
       () => document.querySelector('title').innerHTML,
     );
     expect(titleText).toEqual('默认标题');
+
+    // scripts
+    const scripts = await page.evaluate(() => window.scripts);
+    expect(scripts).toEqual(['headScript1', 'script1', 'script2']);
+
+    // links
+    const link = await page.evaluate(() =>
+      document.querySelector('#link1').getAttribute('foo'),
+    );
+    expect(link).toEqual('bar');
+
+    // metas
+    const meta = await page.evaluate(() =>
+      document.querySelector('#meta1').getAttribute('foo'),
+    );
+    expect(meta).toEqual('/bar');
   });
 
   it('a page', async () => {

packages/umi-plugin-react/test/normal/.umirc.js

@@ -27,6 +27,14 @@ export default {
         polyfills: [],
         antd: true,
         title: '默认标题',
+
+        headScripts: [{ content: `window.scripts = ['headScript1'];` }],
+        scripts: [
+          { content: `window.scripts.push('script1');` },
+          { src: '/script2.js' },
+        ],
+        metas: [{ id: 'meta1', foo: '<%= PUBLIC_PATH %>bar' }],
+        links: [{ id: 'link1', foo: 'bar' }],
       },
     ],
   ],

packages/umi-plugin-react/test/normal/public/script2.js

@@ -0,0 +1 @@
+window.scripts.push('script2');