Front-end code optimization
– For other optimizations, you can search for details on the Internet. Compressing
the size of the packaged project and improving the packaging speed are very important links in the front-end performance optimization. Combined with the practice summary in the work, some conventional and effective performance optimization suggestions are sorted out. ue
project You can add the –report command: , the dist directory will generate a file "build": "vue-cli-service build --report"after packaging , which is used to analyze the size of each filereport.html
In the code, remove unused library files, demo programs and pages that are not related to business.
The code is not compressed, and
the volume of the js package is 2.43MB for analysis and research. The files built are many and large. The entire project includes static resources of more than 14MB. Some high-definition background images were used before, and after replacing them with sprite images and deleting some codes and After optimization. The overall size of the project is 11MB.
It took 29653ms to build successfully. This picture shows the packaged structure directory.
Packaging in response to gz mode
That is, the use of the compression-webpack-plugin plugin
Online projects are generally combined with the construction tool webpack plug-in or server-side configuration nginx to achieve gzip compression for http transmission. The purpose is to minimize the size of the server-side response file and optimize the return speed
HTML, js, and css resources can usually be compressed by more than 70% after using
gzipcompression-webpack-plugin
npm install compression-webpack-plugin -D
Configuration:
configureWebpack:config => {
// 开发环境不配置
if (process.env.NODE_ENV !== 'production') return
return {
plugins: [new CompressionPlugin({
filename: "[path][base].gz", // 这种方式是默认的，多个文件压缩就有多个.gz文件，
// filename: '[path].gz[query]', // 使得多个.gz文件合并成一个文件，这种方式压缩后的文件少，本项目初次学习不建议使用
algorithm: 'gzip', // 官方默认压缩算法也是gzip
test: /\.js$|\.css$|\.html$|\.ttf$|\.eot$|\.woff$/, // 使用正则给匹配到的文件做压缩，这里是给html、css、js以及字体（.ttf和.woff和.eot）做压缩
threshold: 10240, //以字节为单位压缩超过此大小的文件，使用默认值10240吧
minRatio: 0.8, // 最小压缩比率，官方默认0.8
//是否删除原有静态资源文件，即只保留压缩后的.gz文件，建议这个置为false，还保留源文件。以防：
// 假如出现访问.gz文件访问不到的时候，还可以访问源文件双重保障也就是配置为false，我这里就直接使用gz单模式
deleteOriginalAssets: true
})]
}
}
Packaged code directory structure
Now the entire packaged package is 5.6MB. very extreme compression
It can be seen that the browser can parse such a package that all become .gzfile packages . Then push this package to the nginx environment, and the browser can request (employment cache, second-display homepage and other resources), because the gz file is used to reduce network overhead during network transmission, how to request to enable gzip in the server configuration , the request will first match the gz compression format with the same file name and return it. Note that the value of Content-Encoding in the Response Headers after the page request is "gzip", and the value of Accept-Encoding in the Request Headers has a value of "gzip". .
Verify the validity of the plugin:
Improve packaging speed
After enabling gzip compression, the size of the package is greatly reduced, but the packaging time is still too long26880ms
HappyPack multi-threaded packaging
Since webpack running on Node.js is a single-threaded model, we need webpack to be able to process multiple tasks at the same time. Using the power of multi-core CPU computers, HappyPack can
achieve multi-threaded packaging. It decomposes tasks into multiple sub-processes. Concurrent execution, after the child process is processed, the result is sent to the main process to improve the packaging speed
- Install
npm install HappyPack -D
- Introduced in vue.config.js
const HappyPack = require('happypack');
const os = require('os');
// 开辟一个线程池，拿到系统CPU的核数，happypack 将编译工作利用所有线程
const happyThreadPool = HappyPack.ThreadPool({
size: os.cpus().length });
module.exports = {
configureWebpack: {
plugins: [
new HappyPack({
id: 'happybabel',
loaders: ['babel-loader'],
threadPool: happyThreadPool
})
]
}
}
Verify the effectiveness of HappyPack:
Repackage, the latest data is as follows:
Packing speed: 8949ms
After using HappyPack, the packing speed is further increased by 65%
Reasonable project optimization can be done according to the actual situation of the project
https://juejin.cn/post/7186315052465520698#heading-7