foreword
-
Why do we need to optimize the loading of the first screen, because as our static resources and third-party packages and codes increase, the package will become larger and larger after compression
-
With the impact of the network, when we first input the url to request resources, the network is blocked, the loading time is long, and the user experience is not good
-
After careful observation, you will find that the code is not very big after compression, and the big ones are the project itself, static resources, and third-party packages.
-
In addition to the code level, we can request through the static image network, gzip compression, CDN (third-party package import method), browser cache
gzip - what is - why
-
HTTP can compress the transmitted content to reduce the size of the actual data transmitted by the network. The server will compress the resource and transmit it to the client
-
Gzip is a data compression format, which can also be said to be a file format. Can greatly improve the transmission efficiency
-
It means that when we enter the url in the browser, the browser will visit the server, and the server (after Nginx is configured) will compress the content into gzip and transmit it to the browser. The server will first go to the directory to find whether there is a corresponding gz file. If not, nginx will do a compression (no matter how fast the compression is, it will take time). This is when we configure gzip packaging directly at the front-end packaging. When uploading to the server, the browser will directly transmit the content to the browser without compressing it when it visits again.
-
This not only reduces the resource transmission time, but also ensures that the short-term access volume is too high, and the server pressure will not be so great (compression consumes server resources)
-
When we use gzip compression, the first loading time will be at least about 30% faster
Code
1. Download the package at the front end and configure it in the vue.config.js file
Download the package - look at the version yourself
npm install--save-dev compression-webpack-plugina6.1.1vue.config.js configuration - import package first - configure in contiurenebpack
// 外层引入包
const CompressionPlugin = require('compression-webpack-plugin')
// 配置
configureWebpack: {
name: name,
resolve: {
alias: {
'@': resolve('src')
}
},
plugins: [
new CompressionPlugin({
cache: false, // 不启用文件缓存
test: /\.(js|css|html)?$/i, // 压缩文件格式
filename: '[path].gz[query]', // 压缩后的文件名
algorithm: 'gzip', // 使用gzip压缩
minRatio: 0.8 // 压缩率小于1才会压缩
})
]
},icon
2. Project packaging - we will find that all static resources in the dist/static/css-js file have a compressed file with a .gz suffix (proves that the configuration is successful)
3. nginx configuration - restart nginx after the configuration is complete
-
Regarding nginx configuration - many articles will configure many commands at the http layer - in fact, a basic is enough. It is recommended not to follow the trend if you don't know the command
-
We only need to configure a gzip on the outermost layer of http, and configure a use on the server layer. After restarting nginx, gzip compression will take effect
4. Check whether it takes effect
-
First of all, if the configuration really takes effect, when you clear the browser cache and visit again, you will find that it is much faster
-
Secondly, we open the f12 check - come to the network request - click js to get css - right click to debug Content-Encoding
Refer to the picture
Summarize:
After this process, I believe you also have a preliminary deep impression on vue optimization first screen loading time optimization-gzip compression, but the situation we encounter in actual development is definitely different, so we need to understand its principle , ever-changing remains the same. Come on, hit the workers!
Please point out any deficiencies, thank you -- Fengguowuhen