1. Load the service JS as required

Split the page code and load it on demand — React-loadable splits the routing code

Specific use:

npm install react-loadable --saveCopy the code

Configure in the.babelrc file:

{
    "plugins": [..."syntax-dynamic-import",]},Copy the code

In the routing file:

import Loadable from 'react-loadable';
import load from '.. /src/util/load'; // The loading animation is required for page loadingCopy the code

Component references from the original

import Home from '.. /src/app/home';Copy the code

into

const Home = Loadable({  
    loader: () => import('.. /src/app/home'Loading: load, delay: 300, // Loading loading component after milliseconds, default is 200});Copy the code

Util/load js animation

import React from 'react';
import { Spin } from 'antd';

export default function Loading({ error, pastDelay }) {  
    if (error) {    
        return null;  
    }  
    if (pastDelay) {    
        return (      
            <div 
                className="loading-wrap"
                style={{          
                    position: 'absolute',          
                    left: 0,          
                    right: 0,          
                    top: 0,          
                    bottom: 0,          
                    display: 'flex',          
                    justifyContent: 'center',          
                    alignItems: 'center',
                  }}      
              >        
                  <Spin size="large" />      
               </div>    
        );  
    }  
    return null;
}Copy the code

2. Webpack-bundle-analyzer (Visual view viewer)

View webpack after all components and dependencies between components, for redundant package files too large.

Install the webpack-bundle-Analyzer plug-in

npm install --save-dev webpack-bundle-analyzerCopy the code

Add the following to the WebPack configuration file where you need to view all the dependencies between components after WebPack is packaged:

Webpack. Prod. Js introduction:

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;Copy the code

Webpack.prod. js configuration: add to plugins

plugins: [    ...,
    new BundleAnalyzerPlugin()
],Copy the code

Run:

npm run buildCopy the code

Final output:



Found the ICON component in ANTD and the locally introduced moment packaged too large.

3. Pack too big for moment

If you Google it, you’ll know

Externals in webpack ——-

Prevent packages that are imported from being packaged into the bundle and retrieved externally at run time.

The configuration is as follows:

In the webpack.prod.js file:

externals: {    
    // 'react': 'React', / /'mobx': 'mobx'// CDN import umD version, otherwise error //'mobx-react': 'mobxReact'.'moment': 'moment', / /'react-dom': 'ReactDOM', / /'react-router-dom': 'ReactRouterDOM'  
},Copy the code

Uncomment the annotated import package if it is necessary to obtain it externally.

To the packaged HTML template file add:

<! -- <script src="https://cdn.bootcss.com/react/16.8.1/umd/react.production.min.js"></script>  
<script src="https://cdn.bootcss.com/react-dom/16.8.1/umd/react-dom.production.min.js"></script>  
<script src="https://cdn.bootcss.com/react-router-dom/4.4.0-beta.6/react-router-dom.min.js"></script>  
<script src="https://cdn.bootcss.com/mobx/5.9.0/mobx.umd.min.js"></script>  <script src="https://cdn.bootcss.com/mobx-react/5.4.3/index.min.js"></script> -->  
<script src="https://cdn.bootcss.com/moment.js/2.24.0/moment.min.js"></script> 
<script src="https://cdn.bootcss.com/moment.js/2.24.0/locale/zh-cn.js"></script>Copy the code

Run:

npm run buildCopy the code

Final output:



The moment is not in the package file.


4. Too much packaging for icon components

I did not use the icon icon alone in my project, but ANTD package still has the icon file, why?

The reason is that some components in antD components import ICONS by default, such as Select,DatePicker, and so on. Antd packages the Icon component whenever such components with built-in ICONS are introduced into the project. The official solution has not yet been given, but there is a tentative solution. Svg icons make bunlde size too large #12011


5. Use gzip on the server

Explanation from the Great God:

GZIP was first created by Jean-Loup Gailly and Mark Adler for file compression on UNIX systems. In Linux we often use files with the suffix.gz, which are in GZIP format. Nowadays, it has become a very popular data compression format, or file format, used on the Internet. GZIP encoding over the HTTP protocol is a technique used to improve the performance of WEB applications. High-traffic WEB sites often use GZIP compression technology to give users a sense of speed. This usually refers to a feature installed in WWW servers that compresses the content of web pages to display in the visiting computer’s browser when someone visits a web site on the server. Generally for plain text content can be compressed to 40% of the original size. This transfer is fast, the effect is that you click on the url will be quickly displayed. Of course, this also increases the load on the server. General server are installed with this functional module.

Express gzip enabled:

npm install compressionCopy the code

App. Js

var compression = require('compression'); app.use(compression()); // Used in front of other middlewareCopy the code

Yes, it’s that simple

React optimizations will be optimized for now, and will be added in the future. In particular, pay attention to antD Icon packaging