Webpackage & React project optimization + tips

Recently, WEBpack + React was used to customize a set of framework for managing the background. Here are the optimization points used in this project.

(1) The toolkit Lodash is loaded on demand

Import {debounce} from 'lodash. Debounce '// Load on demand option 2: babel-plugin-lodash combines the lodash-webpack-plugin configurationCopy the code

(2) When using ANTD, all language packages will be imported by default. This is because moment introduced, using the following plugin, you can only import the required language packs

    new webpack.ContextReplacementPlugin(
        /moment[\\\/]locale$/,
        /^\.\/(zh-cn)$/
    ),
Copy the code

(3) good picture compression loader, after typePng compression, packaging can compress a lot of

{
    loader: 'image-webpack-loader'.options: {
                            mozjpeg: {
                                progressive: true.quality: 65
                            },
                            // optipng.enabled: false will disable optipng
                            optipng: {
                                enabled: false,},pngquant: {
                                quality: [0.65.0.90].speed: 4
                            },
                            gifsicle: {
                                interlaced: false,},// the webp option will enable WEBP
                            webp: {
                                quality: 75}}},Copy the code

(4) AntD Icon is introduced globally, and it is expected to become introduced on demand. You need to download purtch-ANTD-icons plug-in

Configure in resolve.alias:'@ant-design/icons': 'purched-antd-icons'// make ANTD load on demandCopy the code

(5) Configure the directory SRC and resove.alias. – skills

/** * all resolve.alias configuration items so that SRC first directory can be accessed directly by name */
const srcFiles = fs.readdirSync(resolve('src'))
let resolveConfig = {}
srcFiles.forEach((item, key) = > {
    resolveConfig[item] = resolve(`src/${item}`)
})

alias: {
            The '@': resolve('src'),
            'apis': resolve('src/services/apis'),
            ...resolveConfig
        }
Copy the code

(6) Custom breadCrumb (according to the parent-child relationship of menu) requires a configuration file, a breadCrumb component

The menu.conf.js configuration file

/* * @description: menu default open a parent class menu.item set to active, non-layer menu.item need to know the parent class menu path * @lasteditTime: 2019-11-05 19:24:40 */
export const menuPathRelations = {
    '/institude/wallet': {
        name: 'Wallet Management'
    },
    '/institude/student': {
        name: 'Student Management'.subs: {
            '/institude/student/detail': {
                name: 'Student Details'.// subs: {
                // '/institude/student/detail/as': {
                // name: 'as'
                / /}
                // }}}}}Copy the code

BreadCrumb components

/* * @Description: * @LastEditTime: 2019-11-06 20:12:07 */
import { menuPathRelations } from 'config/menu.conf'
import { Link } from 'react-router-dom'
import { Fragment } from 'react'
import PropsType from 'prop-types'
import { Icon } from 'antd'

export class BreadCrumb extends React.Component {
    static propsType = {
        url: PropsType.string
    }
    / / recursion
    getPath(paths, path) {
        if(! path)return
        if (paths[path]) {
            return <span>{paths[path].name}</span>
        }
        for (let key in paths) {
            let path_item = paths[key]
            if (path_item.subs) {
                if(!!!!!this.getPath(path_item.subs, path)) {
                    return<Fragment> <Link to={key}>{path_item.name}</Link> <a>&nbsp; <Icon type="right" />&nbsp; </a> {this.getPath(path_item.subs, path)} </Fragment> } } } } render() { return ( <div className='BreadCrumb_container'> {this.getPath(menuPathRelations, this.props.url)} </div > ) } }Copy the code

Breadcrumb quote

import { BreadCrumb } from "layouts/BreadCrumb/BreadCrumb"; // Just pass the current route <BreadCrumb url={this.props.match.url} />
Copy the code