• Explore three technical schemes of micro front end


    What is a micro front end First of all, we should know what isMicroservices Microservice is a variant of service-oriented architecture (SOA). It designs applications into a series of loosely coupled fine-grained services, and organizes them through lightweight communication protocols. Specifically, it constructs applications into a group of small services. These services can be deployed […]

  • Vue source code interpretation (I): preparation


    preface Vue3 has been out for a long time, but the study of vue2’s source code principle has always been a necessary link, whether in promotion and salary increase or on the way to find another job. It is in line with the saying “interview makes a rocket and screw up at work”. Although I […]

  • Establish a website with node.js and mongdb


    Establish a website with node.js and mongdb reference material:1. Jade learninghttps://www.jianshu.com/p/e2a…http://www.nooong.com/docs/ja…2. Structural design of app.js (function)http://www.cnblogs.com/scottj…Video reference:https://www.imooc.com/video/1091 Tool selection 1. First, introduce the required development framework 2. Front end tools 2. Local development environment Development steps Prototype drawing front end: backstage: Node entry file analysis and directory initialization The first is project structure initialization Write […]

  • How does the code packaged by webpack run in the browser? I lose if I don’t understand


    Say something Recently, I was working on an engineering related project – micro front end, which involves the loading and coexistence of base project and sub project; In the past, webpack was always configured, which is often referred to as the entry level. I had to step over the threshold and look inside more. This […]

  • Graphic webpack – Fundamentals


    This section is mainly used for the introduction of webpack. First, the main content of this article is explained at the beginning with a mind map drawn by mindmaster. Readers can expand their own mind map on this basis. 1、 Entry Definition: indicates which module the webpack should use as a starting point for building […]

  • Graphic webpack – Optimization


    Firstly, a mind map drawn by mindmaster is used to explain the main content of this paper. Readers can expand their own mind map on this basis.Besides the basic configuration, webpack also needs to be optimized. For the development environment, it mainly optimizes the packaging construction speed and code debugging; For the production environment, it […]

  • Multi entry webpack hot update failed?


    preface WebpackModern front-end developers must be quite familiar with it. It is widely used in many projectswebpack-dev-server, I believe everyone should have been contacted. Recently, the author is configuring multiple entries, and the hot update is easy to work on a single entry. As a result, it is difficult to work on multiple entries?, Then […]

  • Webpack packaging performance optimization checklist


    speed-measure-webpack-plugin You can use the speed measure webpack plugin to measure the packaging time Optimization list Optimize loader configuration Since the file conversion operation by the loader is time-consuming, it is necessary to let as few files as possible be processed by the loader.The file to which the loader applies rules can be hit through […]

  • Custom NPM package


    Environment initialization mkdir npm-log cd npm-log npm init -y Entry file The custom dependency module and the command line entry file are different: Module is inpackage.jsonPass inmainField defines the exposed entry of the package; Module originated fromnode, syntax supported by defaultcommonjsstandard Module if usedES ModuleGrammar writing, throughmoduleField definition entry If you are providing command line […]

  • Understanding webpack based on process


    #Understanding webpack based on process ##1、 Overview -Objective: to automate the construction of code -Process: 1. Search all dependent modules 2. Analysis module 3. Packing 4. Repackage -Environment: development environment, test environment and production environment ##2、 Process Overview ###0. Entire build Main configuration items -Entry: entry file -Resolve: search for matching rules -Module.rules: parsing rules […]

  • 1. Core module technical scheme


    Command execution process Preparation stage Command registration Command execution 1. Prepare graph TD A [check version number] –>B (check node version) B — > C (check root startup) C — > d (check user home directory) D — > e (check in parameter) E — > F (check environment variables) F — > G {check […]

  • Package size optimization after webpack 3. X upgrade to 4. X


    preface LastWe talked about the problems, causes and solutions encountered during the upgrade of webpack3. X to 4. X. let’s talk about them todaywebpack 4.xPackaging Optimization for. Packaged Analytics Before optimization, we need to know the packaging of the project,npm run buildafterwebpackThe packaging information will be printed to the terminal, such as: We can see […]