[Turn] React-router4 + webpack Code splitting

Once the project is upgraded to REACT-ROUTER4, it attempts to split the code according to the official documentation. Https://reacttraining.com/react-router/web/guides/code-splitting

In the actual project, the Js,css file by default through Webpack packaging will be very large, is still several megabytes.

In the actual scenario, we need to shorten the first screen time to show time, need to be the first screen not related to other pages of the business and components for code separation, loading on demand.

By loading on demand, if you just modify the logic of a page and do not load the entire project file, the use of the browser cache is increased.

Here's a step-by-step introduction to how code splitting is implemented in my project.

According to the Webpack document https://webpack.js.org/guides/code-splitting/recommended code segmentation is import (), of course require.ensure () as compatible, or support.

The Bundle-loader component mentioned in the React-router4 document is implemented through Require.ensure.

In the actual project

A. Too small a package does not make much sense, and the final consideration is that each level menu is packaged as a split point for loading.

B. Can be configured by parameter configuration split packaging or overall packaging, as far as possible in the Webconfig configuration, it is possible to parameterize

C. packaging file name to make sense, each package is just a module file modification, will not affect the other JS file hash value, improve the cache utilization

The following is the final results, some of the bumpy mental process, can only be simply skipped

1./ROUTER/MODULEA.ROUTER.JSX, to organize the files that need to be packaged together under the document to be used, to facilitate unified management

2.webpack.config.js

Output: {//[chunkhash:8] Set file summary for cache filename: ' [name].[ Chunkhash:8].bundle.js ',//entry the file name rule with the makefile Chunkfilename: ' [name]. [Chunkhash:8].js ',//Not entry defined file (Detach packaged module file, extract common file), Path:target to file name rule with makefile, Publicpath: '/public/'} , plugins: [//...//** set the package ID generation rule to file address + hash form, which is generated Webpack module ID fixed, see reference new we Bpack. Hashedmoduleidsplugin (),//Extract the common file plug-in configuration new Webpack.optimize.CommonsChunkPlugin ({//In the module if the function exists, Also to extract settings//such as Modulea,moduleb used in the editor, entry does not, then will extract the public packaged in a number. Hash.js Async:true, Minch Unks:2///2 JS files are extracted}),//vendor:entry files used in the common files packaged in the vendor file//** manifest: Add this configuration, a loaded ID information unified To a file so that you can implement the hash of the unchanged file generated each time you package, see reference New Webpack.optimize.CommonsChunkPlugin ({names: [' Vendor ', ' Mani Fest ']}),//corresponding chunks Plus ' manifest ', ' Vendor ' new Htmlwebpackplugin ({filename:' ${page.name}.html ', Template: ' ${root_path}/template.ejs ', chunks: [' Manifest ', ' Vendor ', page.name                    ]}], module: {rules: [{test:/\.router\.jsx/, loader: [ According to the file suffix. Router.jsx set rules, mainly the implementation of name and REGEXP, this can be seen Bundle-loader source code can find related support//Now the logic is to take the file name,/rout ER/MODULEA.ROUTER.JSX is packaged into ModuleA.hash.js ' bundle-loader?lazy&name=[1]&regexp= ([^\\\\\\/]*) \ \.            Router\\.jsx ', ' Babel-loader ',], exclude:/node_modules|assets/ }, {test:/\.jsx?$/, Loader: ' Babel-loader ', exclude:/node_modules|asset s/}]},

Bundle-loader the name parameter, the application of the RegExp parameter is to view the source code, at the beginning to see is through what implementation of asynchronous loading, saw the source code of the relevant plug-in
Require.ensure (), the files you want to package are packaged together, only the Chunknameparam in the code below is set to the same value.
In fact, taking into account the better management of the document, by taking. ROUTER.JSX the name of the previous filename

3.bundle.jsx

 1 Import React, {Component} from ' React ' 2 import {Route} from ' React-router-dom '; 3 Const Loading = function () {4 return <div></div> 5} 6//Note props transfer, in component with switch, when nesting will involve 7//increase Lazykey attribute, corresponding to the MODULEA.ROUTER.JSX corresponding key value 8 class Bundle extends Component {9 state = {Ten mod:null11}12 compon Entwillmount () {this.load (this.props)}15 componentwillreceiveprops (nextprops) {if (NEXTPR Ops.load!== this.props.load) {this.load (nextprops)}19}20 Load (props) {var k EY = Props.lazykey | | ' Default ', This.setstate ({mod:null24}) props.load (mod = {T         His.setstate ({Mod:mod[key]? Mod[key]: Mod28}) (}31 render () {32 Return this.state.mod?<this.state.mod {... this.props}/>:<loading/>33}34}35//Note props delivery, in component with Swit CH, nested when there will be involved 36//through the Islazy to separate the packaging configuration,Lazyroute components are not necessary, their respective requirements are handled by the PNS class Lazyroute extends react.purecomponent{38 Componentmap = {};39 render () {40  Let {menu, ... props} = this.props;41 Let {component, Islazy, Componentkey, path} = menu;42 Componentkey = Componentkey | | ' Default '; if (!islazy) {<route Component={component[componentkey] | | component} {... P rops}/>) or else {46//cache through This.componentmap to prevent unnecessary components from reloading the IF (!this.componentmap[ Path]) {This.componentmap[path] = function (props) {return (<bundle load={com Ponent} Lazykey={componentkey} {...props}></bundle>)}51}52 return (&L T Route Component={this.componentmap[path]} {...props}/>);}55}56 Export {Bundle as default, Lazyrout E

The actual packaging effect, or can be, the code has been separated. Some places can also be optimized, such as the 3rd party Lib package is not how to change, and their own components to write a different extraction merge. Mentioned in the literature.

Extreme load-on-demand and asynchronous loading, the code components understand the requirements are relatively high, and now mainly through the Webpack public extraction to do basic optimization

Reference files

http://geek.csdn.net/news/detail/135599 the right posture for a single-page app using Webpack packaging

https://sebastianblade.com/using-webpack-to-achieve-long-term-cache/using Webpack for persistent caching

[Turn] React-router4 + webpack Code splitting