preface

Recently, I wrote a requirement about the react project. The front-end construction was too large and the construction speed was slow. After writing the requirement, I made a summary.

Slow build

The main reason for the slow build is the slow installation of node_modules dependencies and the need for networking.

Build slow solutions

Since node_modulesz doesn’t change very often in a project, the node_modules dependency package is built separately as a base image, so that if the code in the project changes and the dependencies do not change, the process of installing the dependencies is not performed, but instead, the base image is introduced FROM any command. Copy the node_modules file into the React project and build the code to reduce build time.

Content of the basic image file

FROM node RUN set -x \ &&mkdir -p /web-tmp \ &&cd /web-tmp \ &&git clone -b develop git. \ &&mkdir -p /test/web \  && mv /web-tmp/web/package.json /test/web/ \ && mv /web-tmp/web/package-lock.json /test/web/ \ && rm -rf /web-tmp \ && cd /test/web/ \ && npm install --registry=https://registry.npm.taobao.org \ && npm install express commander -g --registry=https://registry.npm.taobao.orgCopy the code

Image file contents in the project

COPY ./web/ /test/web/ RUN true COPY ./web/.[^.]* /test/web/ RUN true COPY ./nginx.conf /test/web/nginx.conf RUN set -x \ && CD/test/web / \ && NPM run the build # nginx mirror FROM docker. Registry. Test: 5000 / library/nginx: 1.19.6 - alpine COPY --from=builder /test/web/nginx.conf /test/nginx/nginx.conf RUN true COPY --from=builder /test/web/build /test/web/ # CMD ["nginx", "-c", "/test/nginx/nginx.conf"] EXPOSE 5602Copy the code

Cause of excessively large frame volume

  • The main installed node_modules dependency package is not removed
  • The project source code is not deleted

Note: Only the built and startup build files in the React project are useful. Other files are useless and need to be deleted.

Solve the problem of excessive volume

  • Delete node_modules

    1. Dockerfile each uppercase instruction code layer, such as COPY,RUN,FROM… The more levels, the larger the volume, so when writing a dockerfile, avoid writing multiple RUN instructions and use && instead. Dockerfile is deleted only when the file is deleted in the same layer, thus reducing the size of the file. Deleting node_modules in the lower layer is useless and does not reduce the size of the file. Every code change triggers a build. Installing dependencies and building code in the same hierarchy, then removing unwanted code, reduces the size of the code, but takes longer and slower to build, and is not recommended.
    2. The first stage is: build the base image according to the above method, build the base image, then enter the base image in the project dockerfile, copy node_modules, execute NPM run build, the second stage is: Copy the build folder built in phase 1 to the phase 2 file and start the build file using nginx. The node_modules file is not stored in the last built file. The node_modules file is not stored in the last built file. The node_modules file is not stored in the last built file.
The first stage # node_modules base image FROM docker. Registry. Test: 5000 / library/test - web - new - baseimage AS builder COPY. / web / / test/web /  RUN true COPY ./web/.[^.]* /test/web/ RUN true COPY ./nginx.conf /test/web/nginx.conf RUN set -x \ && cd /test/web/ \ && NPM run the build # nginx mirror in the second stage FROM docker. Registry. Test: 5000 / library/nginx: 1.19.6 - alpine COPY - FROM = builder /test/web/nginx.conf RUN true COPY --from=builder /test/web/build /test/web/nginx.conf RUN true COPY --from=builder /test/web/build /test/web/ ["nginx", "-c", "/test/nginx/nginx.conf"] EXPOSE 5602Copy the code

Before optimization, the file size is 1.9G, after optimization, the file size is more than 30 M

Nginx file configuration

worker_processes 1; pid /var/run/nginx.pid; events { worker_connections 1024; } http { include /etc/nginx/mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout 65; server { listen [::]:5602; listen 5602; server_name localhost; Location / {# static file access address (only need to change this) root /test/web/; index index.html index.htm; try_files $uri $uri/ /index.html = 404; }}} # let it continue to output daemon off;Copy the code

conclusion

Pro test valid, if you have any questions please leave a message.