Liu Lu, a postgraduate student of Tongji University, is a member of Meituan Dianping restaurant team.

OpenDoc

We edited and shared some of the internal documents for the following reasons:

  • We hope that those interested in joining the team can get the same information and be prepared accordingly
  • The sharing of team work experience and methods is as valuable as the sharing of technology
  • Listen to your peers’ suggestions for improvement

purpose

1) Standardize the directory structure

2) Clean up useless code

Organize files by business dimension

There are several popular directory structures that mainstream frameworks use to build large projects:

The framework
The directory structure
Angular


React


Vue


Organizing files by business dimension has the following benefits:

  1. Component resource aggregation, which is easier to manage and maintain, should be necessary to allow for long iterations and work transitions

  2. You don’t need to worry about resource dependencies when referencing components

  3. Distinguishing between business components and generic components helps to better understand the granularity of components and the level of abstraction of methods

Project structure specification

folder
function
Best practices
For example,
entries Entrance to the file No subfolders, only js entry files for each page
lib Custom component libraries

Place the common components referenced by each page in the common subfolder, and the other component files in parallel in the Lib folder

When using Redux, create the Actions and Reducers folders under Lib to store the corresponding files


less Custom style library

New files are classified by function:

  • Referenced directly by the page – placed directly in the less folder
  • Custom component styles – in the less/ Components folder
  • Base component styles – in the less/ UI-Base folder
  • Globally predefined styles – in the less/lib folder


templates Template library
  • Templates that are referenced only by one file are placed in a subfolder named after the name of the referenced file
  • Templates that are referenced by multiple files go directly to the Templates folder


Reference file specification

category specification For example,
Reference file

Reference files according to the following categories, with a space between the categories

  • Package manager library files
  • Custom Components (lib/)
  • Templates file (templates/)


Reference js and less files without suffixes, reference template files with js suffixes
named The names of the HTML, LESS, and JS files on the new page are all lowercase and connected by a dash (-)

menu-list.html

menu-list.less

menu-list.js
Disposing of discarded files When a page is replaced or deleted by another page, a comment should be added at the top of the corresponding file, explaining the reason for the file’s abandonment, the abandonment time, the personnel who need to review it, and the time to confirm the deletion


Clean up the code

Clean-up areas include:

  • Discarded files
  • Unused functions in less, JS
  • A file that is referenced but not used
File types
Cleaning method
html Find the front end & back end & product to confirm whether it is deprecated
css

Chrome devTool → Audits → Check Audit Present State → Run → Remove unused CSS rules

Chrome also provides CSS Tracker and CSS Coverage to monitor CSS usage (experimental features)
js
  • Using unusedjs github.com/gmetais/unu… (HTTPS is not supported)
  • By calling relationships between modules/components
  • Eslint can find unused expressions, variables, and arguments, but not for usenewOperator function or constructor call

Notice the functions that are not called