According to the need to load

As the production project continues to iterate on functionality, the front-end code volume increases, leading to longer loading times.

In fact, if we look at the build file, it is not hard to see that it actually packages most of our code modules into one file

To reduce load time, we can split up the code, packaging different pages into separate JS files and requesting the current static resource when we need the current resource

For example, when we enter the home page before, we need to complete the static resources of all pages. After loading on demand and splitting, I only need to add part of the code needed in the current page. The volume of static resources becomes smaller and the loading is bound to be faster

The React dynamic import ()

In create-react-app configuration, import() cannot be used directly, so we need to configure bable

cnpm i babel-plugin-syntax-dynamic-import -D
Copy the code

Babel-plugin-syntax-dynamic-import is a webpack-enabled import() plug-in for Babel.

The configuration method is added to plugins in. Bablere or able-loader

{ 
    plugins: ["@babel/plugin-syntax-dynamic-import"]}Copy the code
import React from 'react';
export default function lazyLoad(componentfn) {
    class LazyloadComponent extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                component: null}}async componentWillMount() {
            // Load the page
            const {default: component} = await componentfn();
            // The page is loaded
            this.setState({component})
            // Add a progress bar for loading static resources
        }
        render() {
            const C = this.state.component;
            SetTimeout can be used to add a time when requesting resources asynchronously to prevent flash screen caused by loading too fast
            return C ? <C {. this.props} / > : null; }}return LazyloadComponent;
Copy the code

use

const A = lazyLoad(() = > import(".. /components/a"))
Copy the code

Webpack packages separate JS files according to the import() method and requests their static resources when accessing related functions

Reduce code size

Select a Source Map format to enhance the debugging process. Different values significantly affect the speed of build and rebuild.

Some of these values are appropriate for development environments and some are appropriate for production environments. For development environments, faster source maps are usually added to the bundle at the cost of increasing volume, but for production environments, more accurate source maps need to be separated from the bundle and exist independently.

// Source maps are resource heavy and can cause out of memory issue for large source files.
constshouldUseSourceMap = process.env.GENERATE_SOURCEMAP ! = ='false';
Copy the code
"scripts": {
   
    "build": "cross-env GENERATE_SOURCEMAP=false node scripts/build.js ",},Copy the code

ShouldUseSourceMap set to false Turning off mapping in production reduces code volume by more than 60 percent

Devtool – devtool – Webpack

Antd is loaded on demand

Bable plugins to add

plugins: [
    ['import'[{// Import a plug-in
        libraryName: 'antd'.// The exposed library name
        style: true // The ants style file is dynamically compiled into inline style inserts, so you don't need to import it every time}]]].Copy the code