封装代码切割函数

Author: hyy1115

README.md

@@ -11,31 +11,28 @@
 
 欢迎 watch、star、fork，因为我自己也是基于这套框架做开发，所以我会长期维护该项目，跟随相关插件的升级而升级优化。  
 
-2017.6.10 更新
+2017.6.17 更新
 
-1、测试Windows7上chrome热更新正常；
+1、使用webpack的import()实现代码切割，不只是在路由中使用，你可以在任意组件内部使用代码切割方法懒加载组件，。
 
-2、增加状态提升的实现，代码在搜索页面；
+在路由route中，你可以这样
+```jsx harmony
+//封装好的异步方法，非原创，使用了一个大神写的函数。
+import { asyncComponent } from './AsyncComponent'
 
-3、监听浏览器返回和前进按钮事件执行动画。
+//使用asyncComponent()，你就能将Promise的返回值赋给一个变量
+const Search = asyncComponent(() => import(/* webpackChunkName: "search" */ "./containers/Search/searchContainer"))
 
-2017.6.7 更新
-
-1、新增了global（action）来控制路由切换时调用的动画，我实现了左移动、右移动2种特效，你可以点击下面的demo查看效果。
-
-2017.6.6 更新
-
-1、热更新改成react-hot-loader3；
-
-2、前端改成webpack-dev-server启动；
-
-3、mock移到easy-mock。
+<Route path="/xx" component={Search} />
+```
 
-4、如果你不喜欢这种启动和热更新方式，请切换tag版本（不会切换tag吗？）。
+请注意import()方法是异步的，你不能这样使用
 
-5、更新了webpack插件和其他几个插件，你打包之后会发现js体积变小了。
+```javascript
+const Foo = import("./xx") // 错误的写法
 
-6、新版本推送的比较仓促，有bug可以给我反馈。
+<Route path="/xx" component={import("./xxx")} /> //错误的写法
+```
 
 ==========================================
 
@@ -83,36 +80,6 @@ npm run build-win
 
 ===========================================
 
-压缩效果图  
-![image](https://github.com/hyy1115/react-redux-webpack2/blob/master/public/fenxi.png)
-
-===================================================
-
-#### 关于服务端渲染的建议（内容来自react-router官方文档）  
-
-查看原文：https://reacttraining.cn/web/guides/code-splitting
+压缩效果图（非最新版效果）  
 
-Code-splitting + server rendering
-
-代码分割 + 服务端渲染
-
-We’ve tried and failed a couple of times. What we learned:
-
-我们尝试了很多次都失败了，我们总结了下面几点：
-
-1、You need synchronous module resolution on the server so you can get those bundles in the initial render.
-
-你需要在服务端同步模块解析使得你可以在初始化渲染的时候得到那些文件。
-
-2、You need to load all the bundles in the client that were involved in the server render before rendering so that the client render is the same as the server render. (The trickiest part, I think its possible but this is where I gave up.)
-为了保证服务端渲染和客户端渲染的同步，你需要在客户端渲染前加载和服务端渲染一致的所有文件。（这也是我认为最难搞的地方，所以我放弃了）
-
-3、You need asynchronous resolution for the rest of the client app’s life.
-在客户端运行过程中，你需要异步解析其他没有在初始化渲染的部分。
-
-We determined that google was indexing our sites well enough for our needs without server rendering, so we dropped it in favor of code-splitting + service worker caching. Godspeed those who attempt the server-rendered, code-split apps.
-我们确定谷歌大神对我们网站的索引做得足够好，并不需要服务端渲染来解决SEO的问题，所以我们放弃了这种模式，而是采用更有利的代码分割 + service worker 缓存5的方式。愿上帝保佑那些想要尝试服务端渲染+代码分割的小白鼠:
-
-==================================================
-
-####Finally, JavaScript is the world's best language, if demand, you can directly send me an email  
+![image](https://github.com/hyy1115/react-redux-webpack2/blob/master/public/fenxi.png)

doc/react.md

@@ -61,7 +61,7 @@ app.css：基本的css配置，你也可以把reset.css或者其他初始化样
 
 App.js：我们叫他根组件，在SPA应用中，通常只有一个根组件。
 
-bundle.js：react-router4中使用的懒加载代码，目前我已经注释掉，有需求的可以自己尝试使用。
+AsyncComponent.js：react-router4中使用的懒加载代码，目前我已经注释掉，有需求的可以自己尝试使用。
 
 index.js：webpack中entry使用的入口js文件，包括store的管理，根组件的渲染都在该文件中。
 

src/App.js

@@ -1,18 +1,26 @@
 import React from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux';
-import './app.css'
 import { Route, HashRouter as Router } from 'react-router-dom'
 import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup'
 import createHistory from 'history/createHashHistory'
 const history = createHistory()
 
+/*
+ 全局导入less
+ 如果你发现你的样式没有起作用，那么很可能是没有在这里导入样式
+ */
+import './app.less'
+import './containers/Home/styles/home.less'
+import './containers/Search/styles/search.less'
+
 import * as globalActions from 'actions/global'
+import { asyncComponent } from './AsyncComponent'
+
+import homeContainer from './containers/Home/homeContainer'
 
-/* application components */
-import HomeContainer from './containers/Home/homeContainer';
-import SearchContainer from './containers/Search/searchContainer';
-import BookListContainer from './containers/BookList/bookListContainer';
+const Search = asyncComponent(() => import(/* webpackChunkName: "search" */ "./containers/Search/searchContainer"))
+const BookList = asyncComponent(() => import(/* webpackChunkName: "bookList" */ "./containers/BookList/bookListContainer"))
 
 @connect (
     state => state,
@@ -41,9 +49,9 @@ export default class App extends React.Component {
                           transitionLeaveTimeout={400}
                       >
                           <div key={location.pathname}>
-                              <Route location={location} exact path="/" component={HomeContainer} />
-                              <Route location={location} path="/search" component={SearchContainer} />
-                              <Route location={location} path="/bookList/:bookId" component={BookListContainer} />
+                              <Route location={location} exact path="/" component={homeContainer} />
+                              <Route location={location} path="/search" component={Search} />
+                              <Route location={location} path="/bookList/:bookId" component={BookList} />
                           </div>
                       </CSSTransitionGroup>
                   )

src/AsyncComponent.js

@@ -0,0 +1,33 @@
+import React from 'react'
+export const asyncComponent = loadComponent => (
+    class AsyncComponent extends React.Component {
+        state = {
+            Component: null,
+        }
+
+        componentWillMount() {
+            if (this.hasLoadedComponent()) {
+                return;
+            }
+
+            loadComponent()
+                .then(module => module.default)
+                .then((Component) => {
+                    this.setState({ Component });
+                })
+                .catch((err) => {
+                    console.error(`Cannot load component in <AsyncComponent />`);
+                    throw err;
+                });
+        }
+
+        hasLoadedComponent() {
+            return this.state.Component !== null;
+        }
+
+        render() {
+            const { Component } = this.state;
+            return (Component) ? <Component {...this.props} /> : null;
+        }
+    }
+);

src/app.css src/app.lesssrc/app.css renamed to src/app.less

@@ -22,8 +22,6 @@ import { BookList } from 'components/Home/bookList'
 /*files*/
 const search = require('./files/search.svg');
 
-require(`./styles/home.less`)
-
 /**
  * connect中间件
  * connect一定要写在需要传递参数的组件头部，因为这是语法规则，只对当前关联的组件生效，和java的原理是一致的

src/bundle.js

@@ -1,13 +1,11 @@
 /**
  * Created by Administrator on 2016/7/2.
  */
-import React, { Component } from 'react';
+import React from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 
-import './styles/search.less'
-
 /*actions*/
 import * as searchActions from 'actions/search';
 import * as globalActions from 'actions/global';
@@ -31,6 +29,7 @@ export default class SearchContainer extends React.Component {
     }
 
     componentWillMount() {
+        console.log('进入搜索页面')
         this.props.receiveHotSearch()
     }