Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to achieve demand loading with webpack in React-router". The editor shows you the operation process through an actual case. The method of operation is simple and fast, and it is practical. I hope that this article "how to combine webpack in React-router to achieve demand loading" can help you solve the problem.

Code splitting of 1.webpack

Webpack can load on demand in some ways, and the exposed interface is require.ensure.

Require.ensure (["module-a", "module-b"], function () {var a = require ("module-a"); / /...})

This require.ensure ensures that the module is called asynchronously, and when a module is called in the callback callback, it can be loaded on demand.

2.React-router implements the interface for loading on demand

React-router defines three methods: getChildRoutes, getIndexRoute and getComponents. These three methods are asynchronous and can only be called when needed. The route defined by these three methods is called "progressive route matching". When React-router matches to the route, it only gradually loads the components needed to reroute, so that it can be loaded on demand.

(1) configuration of webpack:

Output: {path: _ _ dirname +'/ dist/js/', publicPath:'/js/', filename:'[name] .js', chunkFilename:'[name]. [chunkhash:5] .chunk.js'}

Here we add chunkFilename:... . This code is used to split the js, paying special attention to the path of publicPath corresponding to the path of the server's resources, otherwise there will be a 404 error when loading js.

(2) reconfigure routing through getComponents and other three methods

Export const routes= {path:'/', getComponent (nextState,callback) {require.ensure ([], require= > {callback (null,require ('.. / components/nav') .default);}, 'nav');}, indexRoute: {getComponent (nextState,callback) {require.ensure ([], require= > {callback (null,require ('.. / components/examine') .default);}, 'examine') }, childRoutes: [{path:'examine', getComponent (nextState,callback) {require.ensure ([], require= > {callback (null,require ('.. / components/examine') .default);}, 'examine');}}, {path:'admin', getComponent (nextState,callback) {require.ensure ([], require= > {callback (null,require ('.. / components/admin') .default);}, 'admin') }, {path:'history', getComponent (nextState,callback) {require.ensure ([], require= > {callback (null,require ('.. / components/history') .default);}, 'history');}}, {path:'feedback', getComponent (nextState,callback) {require.ensure ([], require= > {callback (null,require ('.. / components/feedback') .default);}, 'feedback')}}]}

Here we replace the component in the routing definition with getComponent.

(3) final effect:

On the home page, examine.js and nav.js are loaded:

When switching routes, such as switching from home page to commodity management, in addition to loading examine.js, more admin.js is loaded:

(4) Summary:

We see the demand loading of react-router, mainly in that it can reduce the size of the file requested on the home page.

3. Note:

1. The parameters of the require method in require ('components/Index'). Default cannot use variables, only strings!

2. If your component is exported using es5's module.exports, then only require ('components/Index') is needed. If your component is exported using es6's export default, you need to add default! For example: require ('components/Index'). Default

3. If require.ensure is used to load routing-level components on the routing page, then do not import in other places (including this page), otherwise the chunk file will not be packaged. In short, routing-level components that need to be loaded on demand must be loaded on the routing page.

In particular, point 3, the author fails to load on demand for this reason, paying special attention to the fact that import cannot introduce demand-loaded components anywhere.

This is the end of the introduction to "how to achieve demand loading with webpack in React-router". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.