Let's talk about the evolution of front-end engineering

background

The evolution of front-end engineering is not independent. It is closely related to other front-end fields and grows together. The following will introduce the front-end development background from several dimensions.

Front-end career evolution

ES evolution

development mode

Front-end engineering

Stone Age (JSP/PHP/Single File Mode)

The demand for the front-end is weak, the page is relatively simple, and there are not many auxiliary tools in the development process. It is necessary to manually preview the file and refresh the code. The front-end code is "decorated" in the code such as PHP.

(The era is too long, here is a picture for everyone to experience)

Bronze Age (bundling tools for non-JS stacks)

maven introduction

Host company's internal maven jar/aar package to provide support for client or other java program release. Maven is a build automation tool mainly used for Java projects. Maven can also be used to build and manage projects written in C#, Ruby, Scala, and other languages. The Maven project is hosted by the Apache Software Foundation, which was formerly part of the Jakarta Project.

YUI Compressor

YUI Compressor was a front-end compression tool provided by the industry giant yahoo at that time. In addition to Compressor, Yahoo also provided many front-end related tools and component libraries at that time.

yui.github.io/yuicompress…

A small example of maven packaging js

        <plugins>
            <plugin>
                <!-- YUI Compressor Maven压缩插件 -->
                <groupId>net.alchim31.maven</groupId>
                <artifactId>yuicompressor-maven-plugin</artifactId>
                <version>1.5.1</version>
                <executions>
                    <execution>
                        <goals>
                            <goal>compress</goal>
                        </goals>
                    </execution>
                </executions>
                <configuration>
                    <!-- 读取js,css文件采用UTF-8编码 -->
                    <encoding>UTF-8</encoding>
                    <!-- 不显示js可能的错误 -->
                    <jswarn>false</jswarn>
                    <!-- 若存在已压缩的文件，会先对比源文件是否有改动  有改动便压缩，无改动就不压缩 -->
                    <force>false</force>
                    <!-- 在指定的列号后插入新行 -->
                    <linebreakpos>-1</linebreakpos>
                    <!-- 压缩之前先执行聚合文件操作 -->
                    <preProcessAggregates>true</preProcessAggregates>
                    <!-- 压缩后保存文件后缀 无后缀 -->
                    <nosuffix>true</nosuffix>
                    <!-- 源目录，即需压缩的根目录 -->
                    <sourceDirectory>src/main/static</sourceDirectory>
                    <!-- 输出目录，即压缩后的目录-->
                    <outputDirectory>target/classes</outputDirectory>
                    <force>true</force>
                    <!-- 压缩js和css文件 -->
                    <includes>
                        <include>**/*.js</include>
                        <include>**/*.css</include>
                    </includes>
                    <!-- 以下目录和文件不会被压缩 -->
                    <excludes>
                        <exclude>**/*.min.js</exclude>
                        <exclude>**/*.min.css</exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
复制代码

Summarize

The front-end code will be managed as a part of the back-end project by tools like maven and published to the corresponding back-end project

During the packaging process, js and css can only be simply packaged and compressed, and cannot be further managed.

Silver Age (JS technology stack packaging tool)

Write task scripts by writing bash or nodejs to achieve imperative hot update (HMR) and automatic packaging, representing: Grunt, Gulp;

Introduction to Grunt

Reference official website: www.gruntjs.net/getting-sta…

A small example of Grunt packaging

module.exports = function (grunt) {
    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON( package.json ),
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today( yyyy-mm-dd ) %> */\n',
            },
            build: {
                src:  build/index.js ,
                dest:  build/<%= pkg.name %>.min.js ,
            },
        },
        concat: {
             build/index.js : [ src/foo.js ,  src/bar.js ],
        },
    });

    // 加载包含  uglify  任务的插件。
    grunt.loadNpmTasks( grunt-contrib-uglify );

    // 加载包含  concat  任务的插件。
    grunt.loadNpmTasks( grunt-contrib-concat );

    // 默认被执行的任务列表。
    grunt.registerTask( default , [ concat ,  uglify ]);
};
复制代码

Summarize

The packaging tool of the JS technology stack, the front-end can implement its own packaging tool based on node, and the function points are similar to those of the non-js technology stack.

Golden Age (Bundle)

基于Bundle的概念，借用babel的能力，让js文件按模块的方式进行打包，实现了HMR、以及各类处理器，让前端的工程化脱离了简单的压缩合并，转入了更加丰富的黄金时间，代表：Webpack、Rollup；

一个webpack的小例子

var webpack = require('webpack');var path = require('path');var HtmlWebpackPlugin = require('html-webpack-plugin')var CleanWebpackPlugin = require('clean-webpack-plugin')var ExtractTextPlugin = require('extract-text-webpack-plugin')var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')const VENOR = [ faker ,
   lodash ,
   react ,
   react-dom ,
   react-input-range ,
   react-redux ,
   redux ,
   redux-form ,
   redux-thunk ,
   react-router ]module.exports = {
  entry: {
    bundle: './src/index.js',
    vendor: VENOR
  },
  // 如果想修改 webpack-dev-server 配置，在这个对象里面修改
  devServer: {
    port: 8081
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  },
  module: {
    rules: [{
        test: /.js$/,
        use: 'babel-loader'
      },
      {
        test: /.(png|jpe?g|gif|svg)(?.*)?$/,
        use: [{
            loader: 'url-loader',
            options: {
                limit: 10000,
                name: 'images/[name].[hash:7].[ext]'
            }
        }]
    },
    {
        test: /.css$/,
        loader: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: [{
            // 这边其实还可以使用 postcss 先处理下 CSS 代码
                loader: 'css-loader'
            }]
        })
    },
    ]
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: ['vendor', 'manifest'],
      minChunks: Infinity
    }),
    new CleanWebpackPlugin(['dist/*.js'], {
      verbose: true,
      dry: false
    }),
    new HtmlWebpackPlugin({
      template: 'index.html'
    }),
    // 生成全局变量
    new webpack.DefinePlugin({
       process.env.NODE_ENV : JSON.stringify( process.env.NODE_ENV )
    }),
    // 分离 CSS 代码
    new ExtractTextPlugin( css/[name].[contenthash].css ),
    // 压缩提取出的 CSS，并解决ExtractTextPlugin分离出的 JS 重复问题
    new OptimizeCSSPlugin({
      cssProcessorOptions: {
        safe: true
      }
    }),
    // 压缩 JS 代码
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]};
复制代码

总结

正如webpack官网的banner图描述，这个节点前端构建脱离了简单的文件拼接压缩，真正触摸到了js间的关联，提供了更科学的工程化方案。

后黄金时代（Bundleless）

在Bundle的基础上，结合浏览器解析原生ESM模块的特性，实现Bundleless的开发预览及热更新(HMR)，直接不打包发布或采用webpack等集成式工具兼容打包，代表：esbuild、snowpack。

snowpack介绍

官网介绍（from www.snowpack.dev/）：

Snowpack is a lightning-fast frontend build tool, designed for the modern web. It is an alternative to heavier, more complex bundlers like webpack or Parcel in your development workflow. Snowpack leverages JavaScript's native module system (known as ESM) to avoid unnecessary work and stay fast no matter how big your project grows.

一个snowpack的小例子

/** @type {import( snowpack ).SnowpackUserConfig } */
export default {
  mount: {
    public: { url: '/', static: true },
    src: { url: '/dist' },
  },
  plugins: [
    '@snowpack/plugin-react-refresh',
    '@snowpack/plugin-dotenv',
    [
      '@snowpack/plugin-typescript',
      {
        /* Yarn PnP workaround: see https://www.npmjs.com/package/@snowpack/plugin-typescript */
        ...(process.versions.pnp ? { tsc: 'yarn pnpify tsc' } : {}),
      },
    ],
  ],
  routes: [
    /* Enable an SPA Fallback in development: */
    // { match :  routes ,  src :  .* ,  dest :  /index.html },
  ],
  optimize: {
    /* Example: Bundle your final build: */
    //  bundle : true,
  },
  packageOptions: {
    /* ... */
  },
  devOptions: {
    /* ... */
  },
  buildOptions: {
    /* ... */
  },
};
复制代码

总结

思路上和webpack接近，解决了很多webpack的痛点，但是概念是没有grunt->webpack那么突破，所以定义为后黄金时代。

未来

There are many directions in the future of front-end engineering. There are Modern.js ( modernjs.dev/ ), which is committed to providing a new engineering system , and there are those who start from efficiency and hope to achieve a more automatic and smarter pipeline direction, but combined with other languages. Engineering process, such as Java: blog.csdn.net/nalw2012/ar... The evolution of engineering may also need to rely on the evolution of the entire ecosystem to have more revolutionary progress.

❤️ Thank you for your support

The above is the whole content of this sharing, I hope it will help you ^_^

If you like it, don't forget to  share, like, and favorite  .

Welcome to pay attention to the public  account ELab team  to harvest the first-hand good articles of the big factory~

We are from ByteDance, which is the front-end department of vigorous education, and is responsible for the front-end development of all products of ByteDance Education.

We accumulate and disseminate professional knowledge and cases in the direction of product quality improvement, development efficiency, creativity and cutting-edge technology, and contribute experience value to the industry. Including but not limited to performance monitoring, component library, multi-terminal technology, serverless, visual construction, audio and video, artificial intelligence, product design and marketing, etc.

ByteDance school/social recruiting code: TTMW2E7

Delivery link:  job.toutiao.com/s/N5NBFEq