vue2.x configuration from vue.config.js to project optimization

vue.config.js is an optional configuration file. If this file exists in the root directory of the project (at the same level as package.json), it will be automatically loaded by @vue/cli-service. You can also use the vue field in package.json, but note that this method requires you to strictly follow the JSON format.

Preface

Optimization is also something that needs to be done frequently in actual projects. Especially in medium and large projects, it is essential to reduce the package size and increase the first screen loading time. It is also a high-frequency question in interviews. In this article, I will introduce the effects before and after the vue.config.js configuration and project optimization.
It is mainly suitable for Vue front-end optimization. Through CDN, route lazy loading, image compression, and GIZP compression, the package size of the front-end project deployed to the server can be reduced, because the package size directly affects the speed of the project's first opening, and the front-end file size is smaller, which also means that the CSS file and JS file are also smaller, the download speed will be faster, and the web page loading speed will also become faster, ultimately achieving the purpose of optimizing the front-end project.

vue.config.js configuration options

The file should export an object containing options

Configuration options

Here are some commonly used configurations:

• pages: configure the application's entry file address
• outputDir: The directory of the generated production environment build files
• configureWebpack: simple packaging configuration. Because the scaffolding has built-in webpack, you can personalize the packaging parameters here without modifying the packaging command. It can be an object or an arrow function. Note: if these two forms exist at the same time, the latter will overwrite the former, so you can only use the one that is shown off.
• chainWebpack: The webpack configuration for chain operations is a function
• devServer: proxy configuration, service port settings, if not set, the default port is: 8080

Detailed configuration instructions can be found on the official website.

Packaging optimization to reduce package size

Normal packaging has default configurations, and packaging can be successful without modification, but the package will be larger.

Use the analysis tool that comes with the vue scaffolding to look at the situation before optimization and enter in the command line:

vue ui

This is the package analysis of the front-end part of my own project

Image and video compression

You can see that there are three image and video files that can be optimized, among which MP4 is temporarily ignored because it is difficult to compress to maintain the resolution.
Compress the pictures on the online picture compression website, the compression rate is not bad

You can also use dependencies to compress again when compiling: image-webpack-loader

...
chainWebpack: config => {
    // Compress image config.module
    .rule('images')
    .use('image-webpack-loader')
    .loader('image-webpack-loader')
    .options({
      //{ bypassOnDebug: true }
      mozjpeg: { progressive: true, quality: 65 }, // Compress JPEG images
      optipng: { enabled: false }, // Compress PNG images
      pngquant: { quality: [0.65, 0.9], speed: 4 }, // Compress PNG images
      gifsicle: { interlaced: false } // Compress GIF images
      // webp: { quality: 75 } // Compress SVG images
    })
    .end()
}
...

js code compression

Code compression requires dependency: uglifyjs-webpack-plugin

cnpm i -D muglifyjs-webpack-plugin

Since spaces are processed when packaging, the purpose of using this plugin is to delete console and comments in the production environment.
Note: Since using this plugin will increase compilation time, it is recommended to use it in a production environment.

...
configureWebpack: {
...
	process.env.NODE_ENV === 'production'
      ?new UglifyJsPlugin({
          uglifyOptions: {
            output: {
              // Delete comments comments: false
            },
            compress: {
              drop_console: true,
              drop_console: true //Clear console statements // pure_funcs: ['console.log'] //Custom removal function}
          },
          sourceMap: false
        })
      : () => {} ...
}
,,,

cdn acceleration

Normal webpack packaging will generate a chunk-vendors.js file, which is a bundle that bundles all modules that are not its own but come from other parties. They are called third-party modules or vendor modules. That is, all modules from the project/node_modules directory. So when more and more dependent modules are added and the modules are getting bigger, chunk-vendors.js will become bigger and bigger.

If the website we make ourselves needs to be posted on the server for other people to use, how can we make it faster for your users to access your website?
There are two ways:

• Make your documents as small or as few as possible, and the overall transfer speed will be increased.
• Keep your documents as close to the end user as possible so that the entire transmission path will be greatly shortened.

Public cloud vendors have countless data centers and servers all over the world. Simply put, CDN services mean that these vendors distribute the documents on your server to their servers in different regions.
Each region can be called a node. When a user visits your website, the request sent by the browser will prioritize the node closest to the customer to obtain data, making it easier for the customer to access the website at a faster speed.
The full name of CDN is Content Delivery Network. CDN is an intelligent virtual network built on the existing network. It relies on edge servers deployed in various places and uses the load balancing, content distribution, scheduling and other functional modules of the central platform to enable users to obtain the required content nearby, reduce network congestion, and improve user access response speed and hit rate. The key technologies of CDN mainly include content storage and distribution technology - from reference.

Introducing CDN

Import the address of the third-party library provided by CDN. Here I reference several important and large dependencies: vue vuex elemenet-ui vue-router echarts axios

<!-- public/index.html -->
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
 <script src="https://cdn.bootcss.com/vuex/3.5.1/vuex.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
 <link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css" rel="external nofollow" >
 <script src="https://cdn.bootcss.com/element-ui/2.13.2/index.js"></script>
 <script src="https://unpkg.com/[email protected]/lib/index.js"></script>
 <script src="https://cdn.bootcss.com/echarts/5.0.2/echarts.min.js"></script>

Add imported libraries

Add the dependent libraries that need to be referenced from CDN in vue.config.js

...
configureWebpack: {
...
	externals: {
	  //Specify the format of the third-party library to be mounted: Third-party library name: 'Alias ​​of the library in the project'
	  // Note that element-ui alias can only use ELEMENT, otherwise undefined will appear. vue: 'Vue',
      vuex: 'Vuex',
      'vue-router': 'VueRouter',
      axios: 'axios',
      echarts: 'echarts',
      'element-ui': 'ELEMENT'
	}, 
...
}
...

Annotate the places where dependencies are used in the project

Tip: If the project is large and there are many places that need to be commented, I suggest you delete the package.json of the library imported from the CDN first, and then run the project. It will definitely prompt that the module is missing, and comment where it is prompted, so there will be no omissions.

Possible errors

The alias of element-ui can only be set to 'ELEMENT'. When imported on demand, use ELEMENT.Message...error(...). I have tried to modify it but it will report xxx is undefined.

Large file location comparison

Compare the distribution of large files before and after CDN

Before CDN acceleration:

After CDN acceleration:

The file size is much smaller, and there are basically no major dependencies.

Results

In comparison, the before and after effects are very obvious

First screen loading time optimization

The above process is actually optimizing the first screen loading time, but the first screen loading time can be further optimized.

When only the above packaging optimization is performed, the first screen time is compared:
The loading time was 1.92 seconds before optimization and 1.26 seconds after optimization. The loaded resources were also reduced a lot. In short, the improvement is obvious.

Because CDN is used, the number of requirements has increased.

Routing lazy loading optimization

definition

Lazy loading simply means delaying the loading of routes or loading routes on demand, that is, loading them when needed, and not loading them when not needed. This can speed up the loading speed of the project web page.

Common implementation methods

1. Vue asynchronous component realizes lazy loading of routes

component:resolve=>(['address of the route to be loaded', resolve])

2. Import proposed by es (recommended)

// In the following two lines of code, webpackChunkName is not specified, and each component is packaged into a js file.
const Index = () => import('@/components/index')
const About = () => import('@/components/about') */
// The following 3 lines of code specify the same webpackChunkName and will be combined and packaged into one js file. Chunk components into groups const Home = () => import(/* webpackChunkName: 'visualization' */ '@/components/home')
const Index = () => import(/* webpackChunkName: 'visualization' */ '@/components/index')
const About = () => import(/* webpackChunkName: 'visualization' */ '@/components/about')

Taking the packaging of my project as an example, without specifying webpackChunkName, the js folder packaged has 17 files

After specifying two page routes as the same webpackChunkName, there are only 16 unpacked folders

The reason is that the same webpackChunkName will be combined and packaged into one js file

gzip compression optimization

Simply put, gzip compresses files after packaging to make them smaller and faster to transmit. The effect is that when you click on a URL, the relevant content will be displayed quickly. However, not every browser supports gzip. If you want to know whether the client supports gzip, there is an Accept-Encoding in the request header to indicate support for compression. The client's http request header declares the compression method supported by the browser, and the server configures the compression to enable, the compressed file type, and the compression method. When the client makes a request to the server, the server parses the request header. If the client supports gzip compression, the requested resource is compressed and returned to the client in response. The browser parses it in its own way. In the http response header, we can see content-encoding:gzip, which means that the server uses gzip compression.

Enable GZIP on the front end

A plug-in is needed here: compression-webpack-plugin

npm install compression-webpack-plugin

Set it in vue.config.js

configureWebpack: {
...
new CompressionPlugin({
   filename: '[path].gz[query]',
   algorithm: 'gzip',
   test: /\.js$|\.html$|\.css/,
   threshold: 10240, // Only resources larger than this value will be processed 10240
   minRatio: 0.8, // Only resources with a compression ratio lower than this value will be processed // Delete the original file // If you want to use it in a development environment, set it to false, otherwise the page will not open after editing // If you want to use it in a production environment, set it to true, so that the packaged size is smaller deleteOriginalAssets: false 
}),
...
}
,,,
// gzip compression

Enable GZIP compression in nginx on the server

Check whether GZIP compression is successfully enabled

References

Vue project optimization documentation
vue.config.js packaging optimization front-end performance optimization gzip

This is the end of this article about vue2.x from vue.config.js configuration to project optimization. For more relevant vue project optimization content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!