Follow  the Vue community and reply to " add group "

Join us to learn together and make progress every day

picture

Author: 0o Andy o0

https://juejin.cn/post/7121279495494959111

foreword

Recently, I was fortunate to do a technical sharing about webpack in the front-end team. In the preparation process of sharing, in order to allow everyone to better understand webpack, I specially made a summary of the previous and current popular construction tools on the market. In the process of sorting and sharing, I have benefited a lot and gained a new understanding of front-end construction tools. Here, I will write down some of my thoughts and summaries, hoping to give some help to students who are also interested in building tools.

The directory structure of this article is as follows:

  • The past and present of build tools [1]
  • The development history of js modularization and changes in build tools [2]
  • Conclusion [3]

The past and present of build tools

When it comes to build tools, the first thing that comes to mind is definitely the  Webpack most 🔥  Vite. Webpack, with powerful functions and rich ecology, has been very popular from its launch to today; Vite the use of  unbundle construction mode brings the ultimate development experience and provides developers with new choices.

In addition to these two build tools, there are other build tools such as and  Webpack, Vite similar  Rollup, Parcel, Esbuild, automated build tools  grunt, gulp, and longer  YUI Tool.

The existence of these tools constitutes the development history of front-end construction tools.

YUI Tool + Ant

YUI tool It is a construction tool that appeared around 2007. It has relatively simple functions and is used to compress obfuscation  css and  js code. It needs to be  java used  together Ant .

At that time, web application development was mainly used  JSP, and the front-end and back-end were not separated like now. Usually, js and css codes were written by java developers, and the front-end code was put together with the back-end java code. Therefore, the compression and obfuscation of front-end code is also implemented based on java.

Grunt/Gulp

Grunt /  are all  automated tools Gulp that run on the  environment.node

During the development process, we can configure some common operations such as 解析 html, es6 代码转换为 es5, less / sass 代码转换为 css 代码, 代码检查, 代码压缩, 代码混淆into a series of tasks, and then execute these tasks by  Grunt /  Gulp automatically.

Grunt and  Gulp the difference:

  • During use  Grunt, some intermediate temporary files will be generated. Some tasks generate temporary files, other tasks may reprocess based on the temporary files and generate the final post-build file, resulting in multiple occurrences  I/O.

  • Gulp With the concept of file flow, multiple tasks and operations are connected through pipelines, no temporary files are generated,  I/O operations are reduced, the process is clearer and purer, and the speed of construction is greatly accelerated.

Webpack/Rollup/Parcel

Webpack, Rollup, Parcel collectively referred to as 静态模块打包器.

This type of build tool usually needs to specify the entry -  entry, and entry then  use it as the starting point to build a module dependency graph - by analyzing the dependencies between the source files in  the  entire project module graph, and then  module graph separate them into three types  bundle:  ,  required   and custom separation rules  .entryinitial bundlelazy loadasync bundlecustome bundle

Each of these build tools has advantages:

  • Webpack It is large and complete, flexible in configuration, and rich in ecology. It is the first choice for building tools.

  • Parcel Known as zero configuration, it is easy to use and suitable for projects that do not require customized construction.

  • Rollup It respects  ESM standard development, and the packaged code is clean and suitable for component library development.

Vite/Esbuild

A new generation of build tools.

esbuild, Based on the  go language implementation, the code is directly compiled into machine code (without parsing it into bytecode and then compiling into machine code like js), the construction speed is  webpack faster than that.

viteESM , In the development mode, with the support  of the browser pair  , nobundle the construction method can provide the ultimate development experience; in the production mode, it is based  rollup on the construction.

The history of js modularization and changes in build tools

javascript At the beginning of the language design, it was only used as a simple scripting language to enrich the functions of the website. It is not a  javaconcept  likec++  .module

This period can be summed up as follows:

  • 青铜时代 - no module;

  • 白银时代 - cjs, amd, cmd, umd, esm appear one after another;

  • 黄金时代 - modularization of components;

Different eras have different build tools.

Bronze Age

Due to the lack  module of concepts, it is  javascript impossible to implement inter-module communication at the language level 相互隔离, 相互依赖and can only be handled manually by developers.

Correspondingly, the early  web development is relatively simple or even rudimentary:

  • realized by means 对象of ;iife(或者闭包)模块隔离
  • script Determined by manual determination  加载顺序between modules 依赖关系.
  • jsp Development mode, there is no dedicated front-end, htmland jsthe css code is usually also written by back-end developers.

For 节省带宽and 保密, usually need to 压缩混淆deal with the front-end code. At this time, the build tool is  YUI Tool +  Ant.

silver age

chrome v8 The engine and  node the engine were born, bringing infinite possibilities to the front end.

At the same time, javascript the modular standard of 's has also developed a new development:

  1. commonjs Specification, suitable for  node environment development.

  2. amd, cmd norm, suitable for the 浏览器environment.

  3. umd, compatible with  amd, commonjs, the code can run in 浏览器and  node environment at the same time.

  4. ESM, that is  ES6 module(it is not very mature at this time);

At the same time  , new things such as less, sass,  es6,  jslint,  eslint, typescript etc. appeared, and the front-end role began to play an increasingly important role and gradually became independent.

With  node the provided platform, a large number of tools start to emerge:

  • requirejs The provided  r.js plug-ins can 分析 amd 模块依赖关系, 合并压缩 js, 优化 css;
  • less /  sass plugin, which can convert  less /  sass code into  css code;
  • babel, which can be  es6 transformed into  es5;
  • typescript, which will  ts compile to  js;
  • jslint /  eslint, code checking;
  • ...

At this time, we can configure the above operations into tasks one by one, and then execute the tasks through  Grunt /  Gulp automatically.

golden age

Based on   the use of the  three frameworks  of Angular, , Vue, and , it has become the mainstream mode of front-end development. At  the same time  , the specification turned out to be more mature and supported by more browsers.ReactWebpack组件模块化ESM

Taking  React and  Webpack as an example, usually we will split all the functions involved in an application into components, such as routing components, page components, form components, table components, etc., each component corresponds to a source file, and then by  Webpack combining these sources file packaging. During the development process, you will also  Webpack open one  local serverto view the running effect of the code in real time.

Webpack It is a static module packager. It will start from the  entry specified entry file, analyze the dependencies between various source files in the entire project, build a module dependency graph -  module graph, and then  module graph separate them into multiple  ones bundle. During the build  module graph process, the  loader source files are processed using, converting them into browser-recognized  js, , css, image, 音视频etc.

With the development of time,  Webpack its functions have become more and more powerful, and it has also welcomed many opponents.

Webpack1
   |
   |
Rollup 出现(推崇 ESM 规范，可以实现 tree shaking, 打包出来的代码更干净)
   |
   |
Webpack2(也实现了 tree shaking, 但是配置还是太繁琐了)
   |
   |
Parcel (号称 0 配置)
   |
   |
Webpack4(通过 mode 确定 development 和 production 模式，各个模式有自己的默认配置)
   |
   |
Webpack5(持久化缓存、module federation)

Esbuild(采用 go 语言开发，比 Webpack 更快)

Vite(推崇 ESM 规范，开发模式采用 nobundle，更好的开发体验)
复制代码

Abundant build tools have formed a blooming situation, which can be used in different situations, bringing more and more choices to developers.

concluding remarks

At present, the position of build tools in the entire front-end system is becoming more and more important. Only Webpack does not even understand the construction tools and can no longer meet the daily development. This requires us to learn from time to time, keep up with the pace of the times, understand the latest technology, and keep moving forward.

Although the road ahead is bumpy, I still believe that the future is promising, come on 💪🏻!

❤️ After reading two things

If you find this content inspiring, I would like to invite you to do me two small favors:

  1. Click " Watching ", so that more people can see this content (if you like it or not, it's all a hooligan -_-)

  2. Pay attention to the public account " Vue Community ", and focus on overcoming a difficult front-end interview every week.

    You can get 27 selected front-end e-books for free by replying to " e-book " in the background of the official account!

picture
Click here to support me, it will be better to forward it