• Terser

    Terser is a JavaScript Parser, Mangler /Compressor tool set. In the early days we used Uglip-JS to compress and uglify our JavaScript code, but it is no longer maintained and does not support ES6+ syntax; Terser comes from uglip-es fork and retains most of its original API and ADAPTS uglip-es and uglify-js@3, etc. That said, Terser helps us compress and uglify our code, making our bundles smaller.

    webpackPackaging is used by default when mode is productionTerser, the following figureSo generally when we do project development, there is no need to go to special configurationTerserWebpack does a good enough job (webPack also does some of that with the help of other plug-insTerserCan’t do the compression, so often configure yourselfTerserNot as good as webpack compression), if the company needs special Settings for this part of the project can also refer to the website Settings to customizeTerser

    Github.com/terser/ters…

  • The compression of CSS

    CSS compression usually removes useless whitespace, etc., because it is difficult to change the names of selectors, properties, values, etc. The CSS -minimizer-webpack-plugin is used.

    This needs to be installed separately with the following installation instructions:

    npm install css-minimizer-webpack-plugin -D

    The Webpack configuration is as follows:

    Packing results :(that is, all Spaces are cleared)

  • Tree Shaking

    • What is theTree Shaking

      Tree Shaking is removing unused code from files for volume optimization

    • webpackimplementationTree ShakingTwo different schemes were used

      • UsedExports: indicates whether certain functions are used and then optimizes them using Terser; It needs to be used in conjunction with Terser, Use code comments to tell Terser which code can be removed (unused Harmony export mul). If testing is needed, use webpack to see the effect In production mode, the useless code has already been eliminated. (I feel this setting is not very useful, so I will not do too much demonstration here. If you are interested, you can try it yourself.)

      • SideEffects: skip the entire module/file to see if the file has sideEffects; (Side effect: some files are imported, but the exported objects are not used, but if you change something like global objects in the file, the whole project will be affected.)

        Usage: inpackage.jsonSet in thesideEffectsIf set tofalseIs to informwebpackYou can safely delete unused onesexports; Or you can pass in an array as shownsuchindex.jsAll code for the file is not packaged

        Similarly, if your company’s project doesn’t have any special needs just change the mode of Webpack to ProductionWebPack will help us eliminate useless code, right

    • CSS implements Tree Shaking

      Tree Shaking is implemented with the PurgeCss plug-in, which needs to be installed first

      Installation command:yarn add purgecss-webpack-plugin -D

      The specific Webpack configuration is shown below:The packing result is shown in the figure below:

  • Scope Hoisting

    The main effect is to improve the scope and make webPack code smaller and faster. modelproductionAutomatically enabledScope Hoisting.developmentIn mode, you need to enable webPack built-in plugin as shown below:

    new webpack.optimize.ModuleConcatenationPlugin();

  • HTTP compression

    HTTP compression is built in between the server and client to improve transmission speed and bandwidth utilization;

    Main implementation methods:A browser-compatible browser sends a request to the server in a browser-compatible format. The server then returns the corresponding compressed file directly and tells the browser in the response header what format to transfer the file

    The browser tells the server to support format screenshots



    The server informs the browser of the screenshot:

    • Several current compression formats:
      • compress— UNIX’s “compress” method (not recommended for most applications, use gzip or deflate instead)
      • deflate— Compression based on deflate algorithm, encapsulated in zlib data format;
      • gzip— GNU ZIP (defined in RFC 1952) is the most widely used compression algorithm;
      • br— A new open source compression algorithm designed for encoding HTTP content;
    • Webpack compresses files (here only compresses files, if the browser pull is also compressed files, requires server configuration)
      • Install plug-in:

        yarn add compression-webpack-plugin -D
      • configuration
      • Pack the result



        Generally, the two files are uploaded to the server. If the browser does not support the compressed format, the source file can be directly returned. The compressed file is also uploaded to the server.nginxFirst check to see if there is a file that requests the gz end of a static file, and if there is, return the gz file content directly. Otherwise, the server will need to compress, so uploading the compressed file can also reduce the load on the server CPU
    • Compress the code

      You can use it directlyHtmlWebpackPluginPlug-ins, which can be configuredminifyParameter is used by defaulthtml-minifier-terserThe plug-in code is compressedSame in patternproductionThe following is enabled by default

  • To encapsulate the Library

    Package your own library file with package code as follows:The packaging configuration is as follows:

    Usage: directly through CDN or NPM package management integration and then introduce call