react router 切割

webpack工具相信用react的同学都比较熟悉了,一个很爽的功能——热更新,稍微改个分号都能够在浏览器局部刷新,很厉害有木有。

安静一下,同学们,不要喧哗!

本章内容不讲热更新,我们来看看webpack的另外一个功能——代码切割(或者叫做路由切割)。

作为react开发者,你应该用过react-router插件吧?没用过的就不要花时间看下面的内容了。

react-router把每个页面包装成了一个唯一的路由,这样的话,一个页面就对应了一个路由(改变hash的算同一个路由),我们在用webpack打包的时候,通常将主要目录下的所有js打包成一个单独的bundle.js(名字随便取)文件,这样一来,只需要首次加载js,然后通过ajax请求json资源,只要你不刷新网页,就不需要重新请求bundle.js,但是也会带来一些问题,就是首屏渲染太慢、SEO。

一个小小的react应用,用webpack打包之后,都可能达到1M以上,然后大家就从网上搜索各种webpack压缩方案,包括UglifyJsPlugin压缩(很有效)、设置NODE_ENV为production、服务器端压缩GZIP等,想尽各种办法,展现了前端工程师无与伦比的美丽。

上面这些办法对于一些中小型应用来说,压缩方案已经足够了,但是当项目大到了一个限度之后,无论你怎么压缩,都无法做到压缩到合适的大小。那么前端界的大神们也想到了一个办法,服务端渲染(说抄java、php,还别不信),服务端渲染很容易理解,就是根据前端请求的路由返回对应的资源,而对于前端来说,这些资源就是一个个切割好的js。

看文字有点累,下面贴上代码给大家看一下基本的react-router长什么样。

import React from ‘react‘;
import { Route } from ‘react-router‘;/* containers */
import { AppContainer } from ‘appContainer‘
import { HomeContainer } from ‘containers/Home/homeContainer‘//首页
import { SearchContainer } from ‘containers/Search/searchContainer‘//搜索页面export default (
<Route path="/" component={AppContainer}>
<Route path="home" component={HomeContainer} />
<Route path="search" component={SearchContainer} />
</Route>
)

这样的写法用webpack打包出来的是一个完整的bundle.js,现在start 切割。

1、修改你的路由

import React from ‘react‘;
import { Route, IndexRoute } from ‘react-router‘;import { AppContainer } from ‘./appContainer‘;
import { HomeContainer } from ‘./containers/Home/homeContainer‘;
//首页不变,搜索页面是子页面,我把他切割出来作为单独的一个js文件,cb里面有一个default,表示导出带有**default**的容器组件。
const searchContainer = (location, cb) => {
require.ensure([], require => {
cb(null, require(‘./containers/Search/searchContainer‘).default)
},‘search‘)
}export default (
<Route path="/" component={AppContainer}>
<IndexRoute component={HomeContainer} />
<Route path="home" component={HomeContainer} />
<Route path="search" getComponent={searchContainer} />
</Route>
);

2、是不是很简单,你是不是要问,这就可以了?当然不是,还有一个需要注意的地方,就是在webpack的配置文件要加上这样一句话。

//入口文件
entry: {
app: [
‘babel-polyfill‘,
‘./src/index‘ 
],
vendor: [‘react‘] //提取react模块作为公共的js文件
},//输入文件
output: {
filename: ‘[name].js‘, //注意这里,用[name]可以自动生成路由名称对应的js文件
path: path.join(__dirname, ‘build‘),
publicPath: ‘/build/‘,
chunkFilename: ‘[name].js‘ //注意这里,用[name]可以自动生成路由名称对应的js文件
},//插件
plugins: [
//必须配置,react的公共模块
new webpack.optimize.CommonsChunkPlugin({
names: [‘vendor‘],
filename: ‘vendor.js‘
})
],

3、然后呢?然后就没了,这样就配置好了!真的相信我,start切割没那么难,只不过网上很多教程没有说明react-router和webpack的关联,特别是[name].js这一点很重要,你要是不这样写,就不能打包成对应的路由js。

4、如果你配置了webpack服务器的话,打开网站首页可以看到只加载了一个js文件app.js,你点击搜索页面的路由的时候,可以看到search.js加载进来了。哇,是不是很开心!开发过程中使用前端服务器加载静态html需要注意一下打包的js加载顺序,写反了会报错!

前端静态html只需要这初始化加载这2个文件,search.js会异步加载进来(你可以叫它懒加载)
<script src="/build/vendor.js"></script>
<script src="app.js"></script>

时间: 2024-10-24 16:34:18

react router 切割的相关文章

react router 4.0以上的路由应用

thead>tr>th{padding:8px;line-height:1.4285714;border-top:1px solid #ddd}.table>thead>tr>td,.table>tbody>tr>th,.table>tbody>tr>td,.table>tfoot>tr>th,.table>tfoot>tr>td{padding:8px;line-height:1.4285714;ver

最新的chart 聊天功能( webpack2 + react + router + redux + scss + nodejs + express + mysql + es6/7)

请表明转载链接:http://www.cnblogs.com/zhangkunweb/p/6853728.html 我是一个喜欢捣腾的人,没事总喜欢学点新东西,可能现在用不到,但是不保证下一刻用不到. 我一直从事的是依赖angular.js 的web开发,但是我怎么能一直用它呢?看看最近火的一塌糊涂的reactjs ,我的天啊,不学会它,怎么能睡好觉. 今天我分享一个依赖最新版本的webpack + react + router + redux + scss + nodejs + mysql +

[React Router v4] Use the React Router v4 Link Component for Navigation Between Routes

If you’ve created several Routes within your application, you will also want to be able to navigate between them. React Router supplies a Link component that you will use to make this happen. Import Link: import { BrowserRouter as Router, Route, Link

[React Router V4] Create Basic Routes with the React Router v4 BrowserRouter

React Router 4 has several routers built in for different purposes. The primary one you will use for building web applications is the BrowserRouter. In this lesson you will import the BrowserRouter and create some basic Route components. After create

[Redux] Filtering Redux State with React Router Params

We will learn how adding React Router shifts the balance of responsibilities, and how the components can use both at the same time. Now when we click the filter, the url changes, but the todos list doesn't change. So continue with that. Router only r

[Redux] Navigating with React Router &lt;Link&gt;

We will learn how to change the address bar using a component from React Router. In Root.js: We need to add a param to change the Route: import React from 'react'; import {Provider} from 'react-redux'; import {Router, Route, browserHistory } from 're

[Redux] Adding React Router to the Project

We will learn how to add React Router to a Redux project and make it render our root component. Install: npm install --save react-router import React from 'react'; import {Provider} from 'react-redux'; import {Router, Route} from 'react-router'; impo

[转] React Router 使用教程

你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系.想要发挥它的威力,整个技术栈都要配合它改造.你要学习一整套解决方案,从后端到前端,都是全新的做法. 举例来说,React 不使用 HTML,而使用 JSX .它打算抛弃 DOM,要求开发者不要使用任何 DOM 方法.它甚至还抛弃了 SQL ,自己发明了一套查询语言 GraphQL .当然,这些你都可以不用,React 照样运行,但是就发挥不出它的最大威力. 这样说吧,你只要用了 React,就会发现合理的选择就是,采用它的整个技术栈.

React漫漫学习路之 React Router

React Router 是一个基于 React 之上的强大路由库,它可以让你向应用中快速地添加视图和数据流,同时保持页面与 URL 间的同步. 目前react-router最新版本已经到4.0+,因为新的版本是一次非常大的改动,所以这里直接讨论4.0以上版本. 引用 react-router // React Router 核心 react-router-dom // 用于 DOM 绑定的 React Router react-router-native // 用于 React Native