Front-end engineering interview questions

1. What results does the following module export?

   exports.a = 'a';
   module.exports.b = 'b';
   this.c = 'c';
   module.exports = {
         
         
     d: 'd'
   }
   

   Reference answer:

   {
          
           d: 'd' }
   

2. Tell me about your understanding of front-end engineering, modularization, and componentization?

   Reference answer:

   Among the three, modularization is the foundation. Without modularization, there would be no componentization and engineering.

   The emergence of modularization has solved the two major problems plaguing the front-end: global pollution and dependency confusion, making it possible to finely split front-end projects.

   The emergence of engineering has solved the contradiction between the inconsistent requirements of the front-end development environment and the production environment. In the development environment, we hope that the code usage is as subdivided as possible and the code format is as unified and standardized as possible. In the production environment, we hope that the code is compressed and obfuscated as much as possible, and the size is optimized as much as possible. The emergence of engineering is to solve this contradiction. It allows us to comfortably write code in the development environment, and then package it to generate the most appropriate production environment code. This frees up the energy of developers and allows developers to Just focus more on the development environment.

   Component development is a concept brought by some front-end frameworks. It divides a web page, or a site, or even a complete product line into multiple small components. A component is a reusable unit that contains a certain full functionality of the area. In this way, the front end has the ability to develop complex applications.

3. What is the difference between webpack and gulp?

   Live explanation

   Reference answer:

   webpack is a modular-based build tool, and gulp is a workflow-based build tool.

   Webpack is a packager. It uses an entry as a starting point to build the dependency graph of the entire project, and then packages and merges it to generate the packaging result.

   Gulp is a process manager. What each step does depends entirely on how the developer configures it. Each step is connected to form a complete build pipeline.

   There is no contradiction between the two. You can use webpack and gulp at the same time in a project, using webpack as a link in the gulp pipeline.

4. What is the difference between the loader attribute and plugins attribute in webpack?

   Reference answer:

   They are all extension points for webpack functionality.

   Loader is a loader, mainly used for code conversion, such as JS code downgrade, CSS precompilation, modularization, etc.

   Plugins are plug-ins. Each link in the webpack packaging process provides hook functions. You can use these hook functions to participate in the packaging life cycle and change or add certain functions of webpack, such as generating pages and css files, compressing packaging results, etc.

5. What are the core concepts of webpack?

   Reference answer:

   • loader

     Loader, mainly used for code conversion, such as JS code downgrade, CSS precompilation, modularization, etc.

   • plugin

     Plug-ins, each link in the webpack packaging process provides hook functions. You can use these hook functions to participate in the packaging life cycle, change or add certain functions of webpack, such as generating pages and css files, compressing packaging results, etc.

   • module

     module. webpack treats all dependencies as modules, whether they are js, css, html, or images, they are all modules.

   • entry

     Entrance. The concept of the packaging process, webpack uses one or more files as the entry point to analyze the entire dependency relationship.

   • chunk

     The concept of the packaging process. A chunk is a relatively independent packaging process. It uses one or more files as the entry point, analyzes the entire dependency relationship, and finally completes the packaging and merger.

   • bundle

     webpack packaging results

   • tree shaking

     Tree shaking optimization. In the packaged results, remove unused code.

   • HMR

     Hot update. This means that when code changes are encountered during operation, there is no need to restart the entire project and only the changed part of the code is updated.

   • dev server

     Development server. A temporary server built in the development environment to host access to packaged results

6. What is the difference between commonjs and es6 modules?

   Reference answer:

   1. CMJ is a community standard and ESM is an official standard
   2. CMJ is modularity achieved using API, and ESM is modularity achieved using new syntax
   3. CMJ is only supported in the node environment, and ESM is supported in all environments.
   4. CMJ is a dynamic dependency, and ESM supports both dynamic and static dependencies.
   5. ESM has symbol binding when importing, CMJ is just a normal function call and assignment

7. How to implement modular asynchronous loading in ES6?

   Reference answer:

   Just use dynamic import. After importing, you will get a Promise. After completion, you will get a module object, which contains all the export results.

8. What are the implementation principles of several hashes in webpack?

   Reference answer:

   • hash

     Hash is related to the construction of the entire project. As long as there are file changes in the project, the hash value of the entire project construction will change, and all files share the same hash value.

   • chunkhash

     Each packaging process has a separate hash value. If a project has multiple entries, each entry maintains its own chunkhash.

   • contenthash

     Each file content has a separate hash value, which is related to the packaging result file content. As long as the file content remains unchanged, the contenthash remains unchanged.

9. If webpack uses hash naming, will the hash be regenerated every time?

   Reference answer:

   Won't. It is related to whether the associated content has changed. If there is no change, the hash will not change. Specifically, contenthash is related to the content of the specific packaging file, chunkhash is related to the content involved in the packaging process starting from a certain entry, and hash is related to the content of all modules in the entire project.

10. How are images processed in webpack? (Douyin live broadcast)

    Reference answer:

    Webpack itself does not process images. It will parse the image content as JS code. The result is an error and packaging failure. If you want to process images, you need to process them through loader. Among them, url-loader will convert the image to base64 encoding, and then get a dataurl, and file-loader will generate the image into the packaging directory, and then get a resource path. But no matter which type of loader it is, their core function is to convert the image content into JS code, because only when it is converted into JS code can webpack recognize it.

11. Why is the style placed at the head and the script at the bottom of the HTML packaged by webpack?

    Note: There is a problem with the formulation of this question. Webpack itself does not package HTML. On the contrary, if it encounters HTML code, it will directly fail to package because webpack itself can only recognize JS. The reason why html files can be packaged is because of the role of plug-ins or loaders. Among them, the more common plug-in is html-webpack-plugin. So the correct statement of this question should be: "Why is style placed at the head and script at the bottom of the html packaged by html-webpack-plugin?"

    Reference answer:

    When the browser parses HTML, it parses it from top to bottom. When it encounters styles and JS, it stops HTML parsing and switches to parsing styles and executing JS. We often hope that the HTML will be parsed after the page's style parsing is completed, so as to avoid page flickering. Based on this, the style should be placed at the top; on the contrary, we hope to execute JS after parsing the HTML, so that the user can access the page as quickly as possible to see the page, and also allow JS to get the complete DOM tree when executing. Based on this, the JS code should be placed at the bottom.

    However, the async and defer attributes appear in HTML5. Using these attributes can better solve JS problems. We can put the script at the top to let the browser download it as soon as possible but delay execution. In fact, in new versions of html-webpack-plugin, it already does this.

12. How to configure webpack so that the development environment does not use CDN and the production environment uses CDN?

    To configure a CDN, there are two steps:

    1. Add cdn reference directly to html template
    2. In the webpack configuration, add externalsthe configuration to tell webpack not to package the modules and use global variables instead.

    If you want not to use CDN in the development environment, you only need to judge different environments based on environment variables and perform different packaging processes.

    1. Use ejs template syntax for judgment in html templates, and only introduce CDN in the production environment
    2. In the webpack configuration, you can process.envdetermine whether to use externalsthe configuration based on the environment variables in
    3. package.jsonSet different environment variables in the script to complete packaging or development startup .

13. Please introduce the workflow of tree-shaking in webpack4?

    Recommended reading: https://tsejx.github.io/webpack-guidebook/principle-analysis/operational-principle/tree-shaking

    Reference answer:

    tree-shaking only supports the static import syntax of ESM. Tree shaking is not supported for dynamic import in CMJ or ESM.

    The specific process is mainly divided into two steps: marking and deletion

    1. mark

       When webpack analyzes dependencies, it will use comments to mark imports and exports. Exports in the module that are not used by other modules are marked as unused harmony export.

    2. delete

       Then perform code streamlining in the Uglifyjs (or other similar tool) step and delete the code marked as useless.

14. Tell me what is the role of webpack loader?

    Reference answer:

    Used to convert codes. Sometimes it is because webpack cannot recognize certain content, such as images, css, etc., and needs to be converted into JS code by the loader. Sometimes it is because some code needs special processing, such as JS compatibility processing, which needs to be further converted by the loader. No matter what the situation is, the loader has only one role, which is to convert the code.

15. If an existing module needs to be extended during the development process, how can the development be carried out to ensure that the caller is not affected?

    Reference answer:

    In fact, it is a version management issue.

    If this module upgrade only fixes some bugs, it can be upgraded as a patch version without affecting the major version and minor version number.

    If this module upgrade will add some new content and is fully compatible with the previous API, it can be upgraded as a minor version.

    If this module upgrade will modify the previous API, it will be upgraded as a major version.

    When developing a project, let the project depend on the main version of the module. Therefore, when the module is updated, as long as the main version is not updated, the project can easily upgrade the module version without changing any code. But if it involves a major version update, the project can completely ignore this version update and still use the old version without changing any code; of course, the main version can also be upgraded, but it will involve code changes, which is like upgrading vue2. Going to vue3 will involve a lot of changes.

    When developing modules, the API must be carefully designed at the beginning, try to ensure that the API interface is stable, and do not change the main version number frequently. If you really want to update the main version, you need to maintain two versions (new main version, old main version) at the same time for a period of time, giving other projects a certain amount of time to upgrade.

16. What is the difference between export and export default?

    Reference answer:

    export is a normal export, also called named export. As the name suggests, the data it exports must be named, such as variable definitions and function definitions. In the exported module object, the name is the attribute name of the module object. There can be multiple named exports in a module

    export default is the default export. The name in the module object is fixed as default, so there is no need to name it. It usually exports an expression or literal. There can be only one default export in a module.

17. What is the packaging principle of webpack?

    Reference answer:

    1. Initialization parameters : read and merge parameters from configuration files and Shell statements to obtain final parameters
    2. Start compilation : Initialize the Compiler object with the parameters obtained in the previous step, load all configured plug-ins, and execute runthe method of the object to start compilation.
    3. Determine the entryentry : Find all entry files according to the configuration
    4. Compile the module : Starting from the entry file, call all configured loaderto translate the module, and then convert the translated content into AST. Find out the modules that the module depends on by analyzing the AST, and continue this step until all the entry-dependent 递归files are After this step of processing
    5. Complete module compilation : After translating all modules using Step 4 loader, the final translated content of each module and the relationships between them are obtained.依赖关系图
    6. Output resources : According to the dependencies between the entry and the module, assemble them into multiple modules Chunk, and then convert each Chunk into a separate file and add it to the output list. This step is the last chance to modify the output content.
    7. Output completed : After determining the output content, determine the output path and file name according to the configuration, and write the file content to the file system

18. What is the principle of webpack hot update?

    Reference answer:

    When hot update is enabled, a websocket script will be embedded in the page. At the same time, the development server will also establish websocket communication with the client. When the source code changes, webpack will perform the following processing:

    1. webpack repackage
    2. webpack-dev-server detects module changes and notifies the client that the changes have occurred through webscoket
    3. After receiving the message, the client sends a request to the development server through ajax and requests a json file from the server with the hash value packaged in the past.
    4. The server tells the client which modules have changed, and also tells the client the new hash value generated by this packaging.
    5. The client again uses the past hash value to request the changed module in JSONP.
    6. The server responds with a function call that updates the module's code
    7. At this point, the module code has been updated. The client executes the callback function after the corresponding module change according to the previous listening configuration.

19. How to optimize the packaging speed of webpack?

    Reference answer:

    1. noParse

       Many third-party libraries themselves are already packaged code. This kind of code does not need to be parsed. You can use the noParse configuration to exclude these third-party libraries.

    2. externals

       CDN can be used for some well-known third-party libraries. These libraries can be configured not to be packaged through externals.

    3. Limit the scope of the loader

       When using loader, you can exclude some unnecessary compilation through exclude. For example, babel-loader does not need to downgrade the third-party libraries that have been packaged, and can be excluded.

    4. Enable loader cache

       You can use cache-loadercached loader compilation results to avoid repeated compilation when the source code has not changed.

    5. Enable multi-threaded compilation

       You can use thread-loadermulti-threaded compilation to improve compilation efficiency.

    6. dynamic link library

       For some third-party libraries that need to be packaged, you can use dll to package them separately, and then DLLPlugin integrates them into the current project, thus avoiding the need to frequently package these libraries during development.

20. How does webpack implement dynamic import?

    Reference answer:

    When encountering a dynamic import statement in the code, webpack will allocate the imported module and its dependencies to a separate chunk for packaging, forming a separate packaging result. The dynamically imported statement will be compiled into an ordinary function call. When the function is executed, it will use JSONP to dynamically load the separated package into the module collection.

21. Let’s talk about what kinds of file fingerprints webpack has.

    Reference answer:

    • hash

      Hash is related to the construction of the entire project. As long as there are file changes in the project, the hash value of the entire project construction will change, and all files share the same hash value.

    • chunkhash

      Each packaging process has a separate hash value. If a project has multiple entries, each entry maintains its own chunkhash.

    • contenthash

      Each file content has a separate hash value, which is related to the packaging result file content. As long as the file content remains unchanged, the contenthash remains unchanged.

22. What are the commonly used webpack Loaders?

    Reference answer:

    • cache-loader: enable compilation cache
    • thread-loader: enable multi-threaded compilation
    • css-loader: compile css code to js
    • file-loader: save the file to the output directory and convert the file content into a file path
    • postcss-loader: Compile css code using postcss
    • url-loader: Convert file content into dataurl
    • less-loader: Convert less code into css code
    • sass-loader: Convert sass code into css code
    • vue-loader: Compile single-file components
    • babel-loader: downgrade JS code

23. Tell me what are the commonly used plug-ins for webpack?

    Reference answer:

    • clean-webpack-plugin: clear the output directory
    • copy-webpack-plugin: copy files to the output directory
    • html-webpack-plugin: Generate HTML files
    • mini-css-extract-plugin: A plug-in that packages css into separate files
    • HotModuleReplacementPlugin: hot update plug-in
    • purifycss-webpack: Remove useless css code
    • optimize-css-assets-webpack-plugin: optimize css packaging volume
    • uglify-js-plugin: compress and obfuscate JS code
    • compression-webpack-plugin: gzip compression
    • webpack-bundle-analyzer: analyze packaging results

24. What are the problems when using babel-loader and how can it be optimized?

    Reference answer:

    1. If no special processing is done, babel-loader will downgrade all matching modules, which is superfluous for those third-party libraries that have already dealt with compatibility issues. Therefore, you can use the exclude configuration to exclude these third-party libraries.
    2. In the old version of babel-loader, the conversion to ESM is enabled by default, which will cause the tree shaking of webpack to be invalid. Because tree shaking needs to retain the ESM syntax, it is necessary to turn off the ESM conversion of babel-loader. In its new version has been turned off by default.

25. How does babel compile classes?

    Reference answer:

    Essentially, the class syntax is converted into an ordinary constructor definition, and the following processing is done:

    1. Added detection of what this points to
    2. Make prototype and static methods non-enumerable
    3. Put the entire code into the immediate execution function, and return the constructor itself after running

26. Explain what the role of babel-polyfill is?

    illustrate:

    babel-polyfill is already a very old project. Babel no longer supports it starting from version 7.4, and instead uses the more powerful core-js. This question is also suitable for asking "What is the role of core-js"

    Reference answer:

    By default, babel itself only converts new syntax and does not process new APIs. Since new APIs cannot be supported in the old environment, for example, IE6 cannot support the fetch API, this requires a patch to implement the new API using the features of the old language. babel-polyfill is used to do this.

27. Explain what the & operator of less is used for?

    Reference answer:

    The content after the ampersand will be merged with the parent selector, that is, no space characters will be added in the middle.

28. What aspects of optimization can be carried out in front-end engineering?

    Reference answer:

    1. Optimization of transmission performance

       • Compression and obfuscation

         Use Uglifyjs or other similar tools to compress and obfuscate the packaging results, which can effectively reduce the package size.

       • tree shaking

         Use ESM as much as possible in the project, which can effectively utilize tree shaking optimization and reduce package size.

       • Extract common modules

         Package some public codes separately, so that you can make full use of the browser cache. After other code changes, the public code will not be affected, and the browser can find the public code directly from the cache.

         There are many specific methods, such as dll, splitChunks

       • Asynchronous loading

         For some modules that can be delayed in execution, you can use dynamic import to load them asynchronously, so that in the packaging results, they will form a separate package. At the same time, they do not need to be loaded when the page is initially parsed, but after the page parsing is completed. , to load them during the execution of JS.

         This can significantly improve the responsiveness of the page and is especially useful in single-page applications.

       • CDN

         Using CDN for some well-known libraries can not only save packaging time, but also significantly improve the loading speed of the library.

       • gzip

         Currently, browsers generally support the gzip format, so static files can be compressed using gzip.

       • environment adaptation

         Some packaging results contain a lot of compatibility code, but these codes are meaningless in new versions of browsers. Therefore, browsers can be divided into multiple levels and different packaging results can be given to browsers at different levels.

    2. Optimization of packaging process

       • noParse

         Many third-party libraries themselves are already packaged code. This kind of code does not need to be parsed. You can use the noParse configuration to exclude these third-party libraries.

       • externals

         CDN can be used for some well-known third-party libraries. These libraries can be configured not to be packaged through externals.

       • Limit the scope of the loader

         When using loader, you can exclude some unnecessary compilation through exclude. For example, babel-loader does not need to downgrade the third-party libraries that have been packaged, and can be excluded.

       • Enable loader cache

         You can use cache-loadercached loader compilation results to avoid repeated compilation when the source code has not changed.

       • Enable multi-threaded compilation

         You can use thread-loadermulti-threaded compilation to improve compilation efficiency.

       • dynamic link library

         For some third-party libraries that need to be packaged, you can use dll to package them separately, and then DLLPlugin integrates them into the current project, thus avoiding the need to frequently package these libraries during development.

    3. Optimization of development experience

       • lint

         Use tools such as eslint and stylelint to ensure that the team's code style is consistent

       • HMR

         Use hot replacement to avoid state loss caused by page refresh and improve development experience

29. If a project package is particularly large - how to optimize it?

    Reference answer:

    1. CDN

       If some well-known third-party libraries are used in the project, you can consider using CDN instead of packaging.

    2. Extract common modules

       If some large public libraries are used in the project, you can consider dividing them and packaging them separately.

    3. Asynchronous loading

       For those modules that do not need to be executed at the beginning, you can consider using dynamic import to load them asynchronously to minimize the size of the main package.

    4. Compression, obfuscation

    5. tree shaking

       Try to use ESM syntax for import and export, and make full use of tree shaking to remove useless code.

    6. gzip

       Turn on gzip compression to further reduce package size

    7. environment adaptation

       Some packaging results contain a lot of compatibility code, but these codes are meaningless in new versions of browsers. Therefore, browsers can be divided into multiple levels and different packaging results can be given to browsers at different levels.

30. How does webpack optimize first-screen loading?

    Reference answer:

    1. CDN

       If some well-known third-party libraries are used in the project, you can consider using CDN instead of packaging.

    2. Extract common modules

       If some large public libraries are used in the project, you can consider dividing them and packaging them separately.

    3. Asynchronous loading

       For those modules that do not need to be executed at the beginning, you can consider using dynamic import to load them asynchronously to minimize the size of the main package.

    4. Compression, obfuscation

    5. tree shaking

       Try to use ESM syntax for import and export, and make full use of tree shaking to remove useless code.

    6. gzip

       Turn on gzip compression to further reduce package size

    7. environment adaptation

       Some packaging results contain a lot of compatibility code, but these codes are meaningless in new versions of browsers. Therefore, browsers can be divided into multiple levels and different packaging results can be given to browsers at different levels.

31. Introduce webpack scope hoisting?

    Reference answer:

    Scope hoisting is a built-in optimization of webpack. It is an optimization for modules and will be automatically turned on when packaging in the production environment.

    When scope hoisting is not enabled, webpack will place the code of each module in an independent function environment to ensure that the scopes of modules do not interfere with each other.

    The role of scope hoisting is exactly the opposite, it is to merge the code of multiple modules into a function environment for execution. During this process, webpack will merge the module codes in the correct order and handle the identifiers involved appropriately to avoid duplicate names.

    The advantage of this is that it reduces function calls, improves operating efficiency, and also reduces the packaging volume.

    However, there are prerequisites for scope hoisting to be enabled. If some modules are referenced multiple times by other modules, or dynamically imported modules are used, or non-ESM modules are used, scope hoisting will not occur.

32. How does webpack proxy work? Why can it solve cross-domain issues?

    illustrate:

    Strictly speaking, webpack is just a packaging tool. It does not have the function of proxy or even the function of server. The reason why you can use proxy configuration in webpack is because of the capabilities of one of its plug-ins, webpack-dev-server.

    Therefore, this question should be asked: "How does webpack-dev-server work? Why can it solve cross-domain issues?"

    Reference answer:

    First of all, the proxy configuration is for the development environment and has no meaning for the production environment.

    When we start the development server through webpack-dev-server, all packaging resources can be obtained by accessing the development server.

    At the same time, we configured proxy. When we request a specific address from the development server, the development server will proxy it to the target address. Therefore, subsequent requests to the proxy address can be changed to direct requests to the development server.

    In this way, the domain where we request the static page and the domain where we request the proxy address have the same source. Because they both request the development server, there will be no cross-domain problems.

33. Do all projects that rely on this component library need to be upgraded when the component is released?

    Reference answer:

    In fact, it is a version management issue.

    If this module upgrade only fixes some bugs, it can be upgraded as a patch version without affecting the major version and minor version number.

    If this module upgrade will add some new content and is fully compatible with the previous API, it can be upgraded as a minor version.

    If this module upgrade will modify the previous API, it will be upgraded as a major version.

    When developing a project, let the project depend on the main version of the module. Therefore, when the module is updated, as long as the main version is not updated, the project can easily upgrade the module version without changing any code. But if it involves a major version update, the project can completely ignore this version update and still use the old version without changing any code; of course, the main version can also be upgraded, but it will involve code changes, which is like upgrading vue2. Going to vue3 will involve a lot of changes.

    When developing modules, the API must be carefully designed at the beginning, try to ensure that the API interface is stable, and do not change the main version number frequently. If you really want to update the main version, you need to maintain two versions (new main version, old main version) at the same time for a period of time, giving other projects a certain amount of time to upgrade.

34. How to design public components during the development process? (ByteDance)

    Reference answer:

    1. Determine usage scenarios

       Clarify how the need for this public component arises, what are its current usage scenarios, and what usage scenarios may arise in the future.

       It is very important to clarify the usage scenario. It determines where the usage boundary of this component is and to what extent it is universal, thus determining the difficulty of developing this component.

    2. Design component functionality

       Design the component's properties, events, and usage documentation based on its usage scenarios.

    3. test case

       Write component test cases according to the usage documentation

    4. Complete development

       Complete development according to usage instructions documents and test cases

35. Tell me what webpack optimizations have been done in the project (ByteDance)

    Reference answer:

    1. Optimization of transmission performance

       • Compression and obfuscation

         Use Uglifyjs or other similar tools to compress and obfuscate the packaging results, which can effectively reduce the package size.

       • tree shaking

         Use ESM as much as possible in the project, which can effectively utilize tree shaking optimization and reduce package size.

       • Extract common modules

         Package some public codes separately, so that you can make full use of the browser cache. After other code changes, the public code will not be affected, and the browser can find the public code directly from the cache.

         There are many specific methods, such as dll, splitChunks

       • Asynchronous loading

         For some modules that can be delayed in execution, you can use dynamic import to load them asynchronously, so that in the packaging results, they will form a separate package. At the same time, they do not need to be loaded when the page is initially parsed, but after the page parsing is completed. , to load them during the execution of JS.

         This can significantly improve the responsiveness of the page and is especially useful in single-page applications.

       • CDN

         Using CDN for some well-known libraries can not only save packaging time, but also significantly improve the loading speed of the library.

       • gzip

         Currently, browsers generally support the gzip format, so static files can be compressed using gzip.

       • environment adaptation

         Some packaging results contain a lot of compatibility code, but these codes are meaningless in new versions of browsers. Therefore, browsers can be divided into multiple levels and different packaging results can be given to browsers at different levels.

    2. Optimization of packaging process

       • noParse

         Many third-party libraries themselves are already packaged code. This kind of code does not need to be parsed. You can use the noParse configuration to exclude these third-party libraries.

       • externals

         CDN can be used for some well-known third-party libraries. These libraries can be configured not to be packaged through externals.

       • Limit the scope of the loader

         When using loader, you can exclude some unnecessary compilation through exclude. For example, babel-loader does not need to downgrade the third-party libraries that have been packaged, and can be excluded.

       • Enable loader cache

         You can use cache-loadercached loader compilation results to avoid repeated compilation when the source code has not changed.

       • Enable multi-threaded compilation

         You can use thread-loadermulti-threaded compilation to improve compilation efficiency.

       • dynamic link library

         For some third-party libraries that need to be packaged, you can use dll to package them separately, and then DLLPlugin integrates them into the current project, thus avoiding the need to frequently package these libraries during development.

    3. Optimization of development experience

       • lint

         Use tools such as eslint and stylelint to ensure that the team's code style is consistent

       • HMR

         Use hot replacement to avoid state loss caused by page refresh and improve development experience

36. Let’s talk about the usage scenarios and usage methods of splithunksplugin in detail. (ByteDance)

    Reference answer:

    1. Public module

       For example, some multi-page applications will have multiple entries, thus forming multiple chunks, and some common modules are used in these chunks. In order to reduce the overall package size, you can use the splithunksplugin to separate the common modules.

       MinChunks can be configured to specify how many chunks are referenced by it for subcontracting.

    2. parallel download

       Since HTML5 supports defer and async, multiple JS files can be downloaded simultaneously to fully utilize bandwidth. If the packaging result is a large file, you cannot take advantage of this.

       You can use the splithunks plug-in to split the file, and configure the maxSize attribute to specify the size of the package to be split.

37. Describe the webpack build process? (CVTE)

    Reference answer:

    1. Initialization parameters : read and merge parameters from configuration files and Shell statements to obtain final parameters
    2. Start compilation : Initialize the Compiler object with the parameters obtained in the previous step, load all configured plug-ins, and execute runthe method of the object to start compilation.
    3. Determine the entryentry : Find all entry files according to the configuration
    4. Compile the module : Starting from the entry file, call all configured loaderto translate the module, and then convert the translated content into AST. Find out the modules that the module depends on by analyzing the AST, and continue this step until all the entry-dependent 递归files are After this step of processing
    5. Complete module compilation : After translating all modules using Step 4 loader, the final translated content of each module and the relationships between them are obtained.依赖关系图
    6. Output resources : According to the dependencies between the entry and the module, assemble them into multiple modules Chunk, and then convert each Chunk into a separate file and add it to the output list. This step is the last chance to modify the output content.
    7. Output completed : After determining the output content, determine the output path and file name according to the configuration, and write the file content to the file system

38. Explain the implementation principle of webpack plug-in? (CVTE)

    Reference answer:

    Essentially, a webpack plugin is an applyobject with functions. After webpack creates the compiler object, it will execute the apply function of the registered plug-in and pass the compiler object as a parameter.

    In the apply function, developers can monitor the execution of multiple hook functions through the compiler object. Different hook functions correspond to different stages of webpack compilation. When webpack reaches a certain stage, these listening functions will be called and the compilation object will be passed in. Developers can use the compilation object to obtain and change various information about webpack, thereby affecting the build process.

39. Have you used any plug-ins for project analysis? (CVTE)

    Reference answer:

    Used webpack-bundle-analyzer to analyze the packaging results, mainly used to optimize project packaging volume

40. What is babel and what does it do?

    Reference answer:

    babel is a JS compiler, mainly used to compile the next generation of JS language code into more compatible code.

    It actually doesn't do much on its own. It is responsible for compiling JS code into AST, and then relies on various plug-ins in its ecosystem to process the syntax and API in the AST.

41. Explain what is the npm module installation mechanism?

    Reference answer:

    1. npm will check whether the module has been installed in the local node_modules directory. If it is already installed, it will not reinstall it.
    2. npm checks whether there is the same module in the cache, and if so, reads the installation directly from the cache
    3. If it does not exist locally or in the cache, npm will download the installation package from the address specified by the registry, then write it to the local node_modules directory and cache it at the same time.