• The main Vue package chunk-vendors. Js file is too large to cause slow page loading solutions.

  • Included: NVM installation with nodeJS version management

  • The chunk-vendor.js file size problem continues to be addressed through the compression-webpack-plugin as described in the main article.

  • Create the vue.config.js file, which will be used for subsequent configurations.

  • Gz file, and then through the configuration of Nginx, let the browser directly parse. Gz file, can greatly improve the speed of file loading, the browser can directly parse.

  • This section describes the format of compressed files

    • Gz: the browser can directly parse and decompress.

    • Br: Br files are compressed using Brotli (an open source data compression algorithm). It contains web assets, such as CSS, XML, SVG, and JS files, and is compressed in Brotli compressed data format. Web browsers (such as Chrome and Firefox) use BR files to speed up page loading, and the Brotli data compression format is designed to replace the Zopfli compression algorithm, which allows compression rates about 20% higher than Zopfli.

    • Nodejs >=v10.16.0 is required to generate.br compression. This is not a problem on the local server. Note that the online server may not find zlib and install it.

  • Installing a plug-in

    • NPM install

      $NPM install --save-dev compression -- webpack-plugin $NPM install --save-dev compression -- webpack-plugin $NPM install --save-dev compression -- webpack-plugin Unable to resolve Dependency tree // So you need to find a lower version to install. If you don't know what version is appropriate to install, go to the NPM website to find this component, find the release list, and install it one by one until successful! $NPM install --save-dev [email protected] $NPM install --save-dev [email protected] $NPM install --save-dev [email protected]Copy the code

    • Yarn installation (same as above)

      $ yarn add compression-webpack-plugin --save-dev
Copy the code

  • $NPM run build $NPM run build $NPM run build $NPM run build $NPM run build $NPM run build

    If Error is reported: The Algorithm “brotliCompress” is not found in “zlib”, because nodejs version is too late and needs to be upgraded. If the upgrade still cannot be resolved, please comment the package of.br first, because it is mainly.gz file compression. Br is only further optimized and is optional.

    const path = require('path'); const webpack = require('webpack') const CompressionPlugin = require('compression-webpack-plugin') const zlib = require('zlib') const isProduction = process.env.NODE_ENV === 'production' module.exports = { configureWebpack: { resolve: { alias: { '@': path.resolve(__dirname, './src'), '@i': path.resolve(__dirname, './src/assets'), } }, plugins: [ new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), New CompressionPlugin({filename:) {compression: webpack-plugin (); '[path][base].gz', algorithm: 'gzip', test: /\.js$|\.css$|\.html$/, threshold: 10240, minRatio: New CompressionPlugin({filename: 0}), // create a.br file for zlib. '[path][base].br', algorithm: 'brotliCompress', test: /\.(js|css|html|svg)$/, compressionOptions: { params: {[Zlib.constants.BROTLI_PARAM_QUALITY]: 11}}, Threshold: 10240, minRatio: 0.8})]}}Copy the code

  • Nginx configuration, find the Server corresponding to the current Vue project to add the following compression-webpack-plugin configuration, and then restart Nginx.

    The following configuration is mainly open server compression function, if not compressed into local gz file, the server will need to be compressed, but it consumes server performance, so the front end through plug-ins are compressed when packaged. Gz file, so that access the server you just need to read the download, the server does not need to walk a compression, reduce server!

    server{ listen 8088; server_name localhost; # compression-webpack-plugin configuregzip on; gzip_min_length 1k; gzip_comp_level 9; gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; gzip_vary on; Gzip_disable "MSIE [1-6]\."; gzip_disable "MSIE [1-6]\. }Copy the code

  • Press the above configuration to complete, re-package and submit to the server, and then access. This is the packaged access situation!