preface

Umi, as an enterprise-level front-end application framework, can greatly improve the front-end development efficiency with its extensibility and out-of-the-box characteristics

[In the actual project] I found that there were still many things that could be optimized, so I packaged the scaffolding UMits based on UMI3

Before reading the article, please download the project and run the project address, click me!!

Umits [5 min.] Build large projects

Based on UMi3 and UMI-CLI, Umits has done compilation and packaging optimization, construction optimization, specification integration, tool integration and demo demonstration

Users can quickly get involved in development, and only need to focus on business development, improve human efficiency, while the integration of code specifications to a certain extent to ensure code quality

The front-end Lint specification can ensure code quality to a certain extent, but there are some things you can’t cover:

Front-end Large Project Series (I) – Front-end code specification

Use umits

• Scaffolding mode

npm install umits -g
umits i
Copy the code

Umits architecture

Umits optimization effect

Total volume decreased by 557KB!

How?

Dayjs replace my moment

// .umirc.ts
import AntdDayjsWebpackPlugin from 'antd-dayjs-webpack-plugin';
export default defineConfig({
	// omit code...
	chainWebpack(memo) {
    	// dayjs replaces moment
        memo.plugin('AntdDayjsWebpackPlugin').use(newAntdDayjsWebpackPlugin()); }},Copy the code

Replace moment with dayJS, and solve the moment international language pack bulky problem

Close the sourceMap

// .umirc.ts

export default defineConfig({
	devtool: false // Close sourceMap to reduce volume and speed up compilation
}

Copy the code

As for no sourceMap on line will affect bug detection problem solution: access front-end monitoring Sentry, Sentry support separate upload sourceMap to locate bugs

Sentry document

Extract common resources to avoid repeated resource packaging

// umirc.pro.ts
 chainWebpack: function(config, { webpack }) {
        config.merge({
            optimization: {
                minimize: true.splitChunks: {
                    chunks: 'all'.minSize: 30000./ / unit of byte
                    minChunks: 1.// The number of citations
                    maxAsyncRequests: 5.// The number of asynchronously loading chunks after splitting is greater than 5
                    automaticNameDelimiter: '. '.// chunks name delimiter
                    cacheGroups: {
                        common: {
                            name: 'common'.// Basic framework
                            chunks: 'all'.// It does not distinguish between dynamic and synchronous mode, as long as it can be removed
                            test: /[\\/]node_modules[\\/](react-dom|react|dva|redux)[\\/]/,
                            enforce: true.priority: 10,},vendor: {
                            / / public chunks
                            name: 'vendors'.test: /^.*node_modules[\\/](? ! react|react-dom|antd).*$/,
                            chunks: 'all'.priority: 9,},'async-commons': {
                            // Load the rest asynchronously
                            chunks: 'async'.// Optimizes only dynamically loaded code
                            minChunks: 2.name: 'async-commons'.priority: 8,},},},},},});// dayjs replaces moment to reduce package size
        config.plugin('AntdDayjsWebpackPlugin').use(new AntdDayjsWebpackPlugin());
    },
Copy the code

Other optimizations, load resources asynchronously, etc

Program source code

Umits source

Builds are 60% faster

Configure four different environments

• umirc.ts
• umirc.test.ts
• umirc.pre.ts
• umirc.pro.ts

For different environments, the emphasis is different, local needs incremental compilation faster, online focus on stability and reduced package size

4 sets of environment configuration, please see the project source code Umits project source [open source] welcome to improve together

Link: (github.com/Master-H/um…).

[Before optimization] Compilation time

[Optimized] Compilation time

Tool function encapsulation

Axios encapsulation

• Before packaging

axiosGet('/login', {params: {age:1
    }
})
axiosPost('/login', { age:1 })

Copy the code

• Unified use mode of GET, POST, PUT, and delte after encapsulation

axiosGet('/login', {age:1 }) // Don't put it alone in params, keep the style uniform
axiosPost('/login', { age:1 })

axiosPut('/login', {age:1 })
axiosDelete('/login', { age:1 })

Copy the code

The input parameter is (URL,object) form, the use of unified convenient,And encapsulate the interface error.Fast positioning, no separate processing is required

Unwrap request

• Cancel function to cancel the request

import { cancel } from '@/utils/axios';
cancel('cancel message');
Copy the code

The cancellation effect is as follows

• WithCancelHoc, cancel the request for higher-order components

import WithCancelRequestHoc from '@/components/withCancelRequestHoc';

const PaneA: React.FunctionComponent<IProps> = () = > {
    useEffect(() = >{ TestService.getTest1(); TestService.getTest2(); } []);return (
        <div>
            <h1>Switch to panel</h1>
        </div>
    );
};

export default WithCancelRequestHoc(PaneA);


Copy the code

The above code is implemented, the component uninstall default cancel the current page request, in some scenarios necessary, such as two Tab pages, exactly the same, only the entry parameter is not the same, it may be because of network problems, resulting in data disorder

TabA page: Request data get1, data is not backfilled, switch to TabB

TaB page: request data get2, due to network problems, get2 first backfill data, after a while get1 data backfill overwrite get2, it will lead to error display

Code specification check

Git CZ, Eslint, or stylelint mandatory verification. If it does not meet the requirements, submission is prohibited

Umits produce the background

The company the status quo

There have been 5 large projects developed and run stably based on UMI in the company, but no set of scaffolding based on actual combat optimization has been deposited

I thought about a question, and also asked others, how to rebuild a Umi based project, how long will it take?

There are two ways to build a new project:

• The first kind of

Git Clone 【umi old project 】 2. Delete unnecessary folders, NPM packages, and business related codes. 3.Copy the code

• The second,

2. Start configuring Eslint prettier 3. Copy generic function components and delete unnecessary onesCopy the code

There is pain points

1, time-consuming, inefficient 2, Eslint prettier, styLint,git CZ configuration is not uniform 3, the project uses UMi2, now umi3, umi2 configuration does not apply to umi3, it takes time to understandCopy the code

For the above pain points, UMits scaffolding was born, and with the front-end large project series (1) – front-end code specification, it can build high quality maintainable large projects in 5 minutes

The demo tutorial

Commonly used: menu configuration, tool functions, asynchronous loading, high-order components have demo case column, easy to get started quickly

conclusion

The development of UMITS does not involve many complicated and sophisticated technologies. Most of them are based on experience and summary, which precipitates a project that can be quickly built with high quality and easy to use. At the beginning, I was also hesitant whether to build this scaffold

But then I thought: through this scaffold, we can make the previously uncomplicated things simpler, and greatly improve the development efficiency and project quality, so Just do It!

Project umits has open source github address points me!

If this article is useful to you, please like it and support it. If it is insufficient, please pat it. Welcome to progress together!

Last notice, from 0 to 1 umi plug-in development, has been on the road