Use the WebPack plug-in to find packages that take up a lot of space

In the development environment, analyze-webpack-plugin can be used to observe the occupation of each module. In the project, for example: the browser type http://localhost:3000/analyze.html you can see the following effects:

According to the need to load

  • Load modules with Babel on demand;
  • We tested day.js instead of moment.js. In fact, moment.

code-spliting

Use the MiniCssExtractPlugin to separate JavaScript and Css files:

823.94 KB build/static/js/main.496a38b7.js 8.2 KB build/static/CSS/main.cssCopy the code

Code-spliting provides three solutions as follows:

Plan 1: Add packing entry in entry

The disadvantages of option 1 are as follows:

  • If multiple files attract the same package (such as Lodash), the referenced package is packaged twice;
  • This scheme is not flexible enough to dynamically split code according to logic;

Therefore, plan 1 is usually used together with Plan 2 and Plan 3. The configuration of Plan 1 is roughly as follows:

Resolve ('./polyfill '), paths.appindexjs], require.resolve('./polyfills'), IndexJs: paths.appIndexJs, },

Scheme 2: Use SplitChunkPlugin

  optimization: {
    runtimeChunk: false,
    splitChunks: {
      cacheGroups: {
        vendor: {
          chunks: 'all',
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          maxAsyncRequests: 5,
          priority: 10,
          enforce: true,
        },
      },
    },
  },

Packing effect is as follows:

723.96 KB build/static/js/vendor a9289a29. The chunk. The js / / node - 98.72 KB modules module build/static/js/main. 7 bcaca24. Js 8.2 KB build/static/css/1.cssCopy the code

At this point, packing node-modules packages into one big chunk is still not load-friendly. The solution is to package the core framework separately and load the rest modules asynchronously, for example using bundle-loader.

Optimization: {runtimeChunk: false, splitChunks: {cacheGroups: {vendor1: {// major modules: 'all', test: /[\\/]node_modules[\\/](react|react-dom|antd)[\\/]/, name: 'vendor1', maxAsyncRequests: 5, priority: 10, enforce: True,}, vendor2: {// minor module chunks: 'all', test: /[\\/]node_modules[\\/]/, name: 'vendor2', maxAsyncRequests: 5, priority: 9, enforce: true, reuseExistingChunk: true, }, }, }, }Copy the code

Packing effect is as follows:

588.06 KB build/static/js/vendor2 d63694f4. The chunk. The js 133.17 KB build/static/js/vendor1.0 d40234c. The chunk. Js 98.72 KB Build/static/js/main. B7a98d03. Js 8.2 KB build/static/CSS / 2. The CSSCopy the code

You can see that the node_modules package has been split into core and non-core modules at this point.

Use dynamic import syntaximport()

First, use the react-loadable package from Amway. The idea of this package is to dynamically divide code according to routes (instead of modules) and asynchronously load the required components, thus greatly improving the page loading speed.

Perform the following configuration on the routing page:

const Loading = () => <div>Loading... </div> const Home = Loadable({ loader: () => import('.. /pages/home'), loading: Loading, }) // Use Route <Router> <Route path="/home" component={home} /> <Route path="/follow" component={follow} /> <Route path="/tools" component={Tools} /> <Route path="/music" component={Music} /> <Route path="/todo" component={Todo} /> <Route path="/album" component={Album} /> <Route path="/editor" component={Editor} /> <Route path="/todoList" component={TodoList} /> <Route path="/searchEngine" component={Search} /> <Route path="/waterfall" component={Waterfall}  / </Router>

Let’s look at the result of code splitting:

Here, the test result is conducted after removing the configuration of plan 2. After experimental comparison, the method of using Plan 3 is slightly better than the method of using plan 2 and Plan 3 together.

235.89 KB build/static/js/IndexJs. 57 ee1596. Js 225.94 KB build/static/js / 15. C09a5919. The chunk. Js 138.18 KB Build/static/js/c26142. 17.30 the chunk. The js 82.71 KB build/static/js / 1.667779 a6. The chunk. Js 57.55 KB Build/static/js / 16. F8fa2302. The chunk. The js 16.46 KB build/static/js / 2. E7b77a5d. The chunk. Js 14.79 KB Build/static/js / 18. The cad 1 f84d. The chunk. The js 12.51 KB build/static/js / 0.73 df11a7. The chunk. Js 11.22 KB Build/static/js/c58. 13.19501 the chunk. The js 8.34 KB build/static/js/fd1c35. 5.33 the chunk. Js 7 KB Build/static/js/f1d0a47. 8.9 the chunk. The js 5.86 KB build/static/js/f0a7ec. 12.24 the chunk. The js 5.06 KB build/static/CSS / 18. The CSS 4.97 KB Build/static/js/polyfill 1 c61a660. Js 3.58 KB build/static/js / 7. Dd4976e3. The chunk. Js 3.53 KB Build/static/js/f6b811. 14.16 the chunk. The js 3.42 KB build/static/CSS / 17. CSS 2.98 KB build/static/js/a61e4. 10.464 the chunk. Js 2.02 KB build/static/js/d5a9. 11.3728 the chunk. The js 1.45 KB build/static/js/fbac58. 6.92 the chunk. Js 1.13 KB Build/static/js/a3a. 9.59160 the chunk. JsCopy the code

The React-Loadable library automatically splits the number of additional packages for each route. As you can imagine, the larger the project, the greater the benefit of this dynamic fetching library.

And you can clearly see that when we are under /home, only the home component is loaded, other components are not loaded!

React-loadable is essentially a higher-order function that uses property brokers to load modules asynchronously by adding states to the higher-order function along with import().

reference

code-splitting

Code-Splitting(react)