Add lazy-loading demo to webpack sample

Author: dustinsoftware

src/React.Sample.Webpack.CoreMvc/.babelrc

@@ -2,6 +2,7 @@
 	"presets": ["@babel/preset-react", "@babel/preset-env"],
 	"plugins": [
 		"@babel/proposal-object-rest-spread",
+		"@babel/plugin-syntax-dynamic-import",
 		"@babel/proposal-class-properties"
 	]
 }

src/React.Sample.Webpack.CoreMvc/Content/components/home.jsx

@@ -13,6 +13,7 @@ import { CommentsBox } from './comments/Sample.jsx';
 import { StyledComponentsDemo } from './styled-components.jsx';
 import { EmotionDemo } from './emotion.jsx';
 import { ReactJssDemo } from './react-jss.jsx';
+import { LazyLoadDemo } from './lazy-load.jsx';
 
 class Navbar extends Component {
 	render() {
@@ -33,6 +34,9 @@ class Navbar extends Component {
 				<li>
 					<Link to="/emotion">Emotion Demo</Link>
 				</li>
+				<li>
+					<Link to="/lazy-load">Lazy loading demo</Link>
+				</li>
 			</ul>
 		);
 	}
@@ -52,6 +56,9 @@ class HomePage extends Component {
 }
 
 export default class HomeComponent extends Component {
+	componentDidMount() {
+		import('react-select').then(x => this.setState({ x }));
+	}
 	render() {
 		const app = (
 			<div className="container">
@@ -81,6 +88,7 @@ export default class HomeComponent extends Component {
 						/>
 						<Route path="/react-jss" component={ReactJssDemo} />
 						<Route path="/emotion" component={EmotionDemo} />
+						<Route path="/lazy-load" component={LazyLoadDemo} />
 						<Route
 							path="*"
 							component={({ staticContext }) => {

src/React.Sample.Webpack.CoreMvc/Content/components/lazy-load.jsx

@@ -0,0 +1,30 @@
+import React, { Fragment, useState, useEffect } from 'react';
+import { Helmet } from 'react-helmet';
+
+export function LazyLoadDemo() {
+	const [lazySelect, setLazySelect] = useState();
+	const [framework, setFramework] = useState();
+	useEffect(() => {
+		import('react-select').then(component => {
+			setLazySelect({ Component: component.default });
+		});
+	}, []);
+	return (
+		<Fragment>
+			<Helmet>
+				<title>ReactJS.NET Demos | Lazy loading</title>
+			</Helmet>
+			{lazySelect && lazySelect.Component ? (
+				<lazySelect.Component
+					defaultValue={'React'}
+					isMulti
+					options={['React', 'Vue', 'Svelte', 'Ember', 'Angular'].map(x => ({ value: x, label: x }))}
+					className="basic-multi-select"
+					classNamePrefix="select"
+					onChange={setFramework}
+				/>
+			) : 'Loading'}
+			<div>{framework ? 'Pick a framework' : null}</div>
+		</Fragment>
+	);
+}

src/React.Sample.Webpack.CoreMvc/package-lock.json

@@ -15,13 +15,15 @@
     "react-helmet": "^5.2.0",
     "react-jss": "^8.6.1",
     "react-router-dom": "^5.0.0",
+    "react-select": "^3.0.4",
     "reactstrap": "^8.0.0",
     "styled-components": "^4.0.0"
   },
   "devDependencies": {
     "@babel/core": "7.4.5",
     "@babel/plugin-proposal-class-properties": "7.4.4",
     "@babel/plugin-proposal-object-rest-spread": "7.4.4",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/preset-env": "7.4.5",
     "@babel/preset-react": "7.0.0",
     "babel-loader": "8.0.5",

src/React.Sample.Webpack.CoreMvc/package.json

@@ -8,6 +8,7 @@ module.exports = {
 		filename: '[name].js',
 		globalObject: 'this',
 		path: path.resolve(__dirname, 'wwwroot/dist'),
+		publicPath: 'dist/'
 	},
 	mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
 	optimization: {
@@ -17,7 +18,7 @@ module.exports = {
 		splitChunks: {
 			cacheGroups: {
 				commons: {
-					test: /[\\/]node_modules[\\/]/,
+					test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
 					name: 'vendor',
 					chunks: 'all',
 				},