在实际业务开发过程中，如果有多个项目都用同样的基础包，我们可以公共基础包单独打成独立的 Script 包，然后各项目通过 Script 引入，这样的好处就是能够提高构建速度，同时因多个项目都引用同一份静态资源，这样就能够重复利用浏览器缓存。

构建 react，react-dom 公共包

编写公共包代码

${root}/src/react-lib.js

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  4. export {
  5.   React,
  6.   ReactDOM
  7. }

Webpack 构建公共包

通过 easywebpack-js 可以快速实现公共包构建打包。

${root}/webpack.config.js

  1. module.exports = {
  2.   framework: 'js',
  3.   entry: {
  4.     'react-core-lib-1.0.0': 'scr/react-lib.js'
  5.   },
  6.   output: {
  7.     library: "ReactCoreLib" 
  8.   }
  9. }

项目 webpack.config.js 配置

${root}/webpack.config.js

  • 前端渲染非 SSR 模式只需要如下配置
  1. module.exports = {
  2.   externals: {
  3.     'react': 'ReactCoreLib.React',
  4.     'react-dom': 'ReactCoreLib.ReactDOM'
  5.   },
  6. }
  • SSR 模式 externals 只能在 web 模式生效
  1. module.exports = {
  2.   ......
  3.   plugins:[
  4.     {
  5.       copy: [{ from: 'app/web/asset/lib', to: 'lib' }] // 直接 Script 方式引入 React 包
  6.     }
  7.   ],
  8.   customize(webpackConfig) {
  9.     // Node Render 时不能 externals script lib
  10.     if (webpackConfig.target === 'web') {
  11.       webpackConfig.externals.push({ 
  12.         react: 'ReactCoreLib.React',
  13.         'react-dom': 'ReactCoreLib.ReactDOM'
  14.       });
  15.     }
  16.     return webpackConfig;
  17.   }
  18. };

项目引入 Script 链接

  1. import React, { Component } from 'react';
  2. import HeaderComponet from './header';
  3. export default class Layout extends Component {
  4.   render() {
  5.     if(EASY_ENV_IS_NODE) {
  6.       return <html>
  7.         <head>
  8.           <title>{this.props.title}</title>
  9.           <meta charSet="utf-8"></meta>
  10.           <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"></meta>
  11.           <meta name="keywords" content={this.props.keywords}></meta>
  12.           <meta name="description" content={this.props.description}></meta>
  13.           <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"></link>
  14.           <script src="/public/lib/react-core-lib-1.0.0.js"></script>
  15.         </head>
  16.         <body><HeaderComponet></HeaderComponet><div id="app">{this.props.children}</div></body>
  17.       </html>;
  18.     }
  19.     return this.props.children;
  20.   }
  21. }

相关 issue：https://github.com/easy-team/egg-react-webpack-boilerplate/issues/47