目录
一、Gzip压缩
二、异步组件
三、分包策略
最后
项目的性能优化是有完整项目经历的开发者都会遇到得一个问题。这是整个项目开发最后的一步，也是最关键的一步，做一个项目并不是单单完成功能就算结束了，作为开发者，更要站在用户角度去进行项目体验，响应快速的程序交互会直接提升程序的印象分。反之，如果页面间的交互响应缓慢、时常卡顿，无论程序功能再多再强大，让人很难去想去体验第二次。这个时候，性能优化尤为重要。
一、Gzip压缩
1.服务端nginx Gzip压缩配置
nginx开启gzip压缩后，就会帮你来把数据（静态资源 和 接口数据）进行压缩，然后传入到客户端，客户端来解压，然后在进行代码的读取，经过测试之后，发现资源包体积会被压缩到原来的20%左右，这样大大减少了资源的请求时间，提升了页面的响应速度。Gzip压缩是项目必备的优化方法，也是最直观有效的。
// nginx.conf
http {
gzip on; // 开启gzip压缩
gzip_types *; // 对响应的MIME types在text/html的基础上进行扩展配置，*匹配所有MIME types ...
gzip_static on; // 开启gzip_static压缩
// 详细的配置信息可以参考nginx官网： http://nginx.org/en/docs/http/ngx_http_gzip_module.html
}2.客户端插件Gzip压缩
webpack项目使用的compression-webpack-plugin插件
// 这里使用的 vue.config.js, webpack.config.js 里面内容大部分相同，只是vue.config.js里面是链式调用的。
const compressionWebpackPlugin = require('compression-webpack-plugin')
configureWebpack: {
plugins: [new compressionWebpackPlugin({
filename: '[path].gz[query]', //压缩后的文件名
algorithm: 'gzip', // 压缩格式 有：gzip、brotliCompress,
test: /.(js|css|svg)$/,
threshold: 10240,// 只处理比这个值大的资源，按字节算
minRatio: 0.8, //只有压缩率比这个值小的文件才会被处理，压缩率=压缩大小/原始大小，如果压缩后和原始文件大小没有太大区别，就不用压缩
deleteOriginalAssets: false //是否删除原文件，最好不删除，服务器会自动优先返回同名的.gzip资源，如果找不到还可以拿原始文件
})],
vite项目使用的vite-plugin-compression插件
// vite.config.ts
import viteCompression from 'vite-plugin-compression';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
...
viteCompression({
verbose: true, // 默认即可
disable: false, //开启压缩(不禁用)，默认即可
deleteOriginFile: false, //删除源文件
threshold: 10240, //压缩前最小文件大小
algorithm: 'gzip', //压缩算法
ext: '.gz', //文件类型
})
...
],
})
二、vue异步组件
异步组件在需要渲染的时候才会被加载，同时延迟加载其余组件，从而提高了首次加载速度，减轻了页面渲染负担，并且也减轻了服务器压力。在项目打包后，如果一个vue页面import了太多的资源，那么这个页面生成一个js资源包而且体积很大，所以进入页面的时候需要下载完这个资源包才会渲染，这样服务端的压力很大，可能出现响应时间长、请求阻塞等问题。使用异步组件后，打包后会将这些组件打包为单独的js包，这样就将一个资源分割成了n个，服务端可以发起多个http请求来下载资源，大大提升了响应时间与渲染速度。
1.vue2异步组件
使用 Vue.component 方法与 resolve => require(['./yourComponent.vue'], resolve) 结合使用。require语法将会告诉 webpack，自动将你的构建代码切割成多个包，这些包会通过 http 请求加载。
Vue.component('async-component', function(resolve) {
require(['./components/AsyncComponent.vue'], resolve)
})2.vue3异步组件
使用vue3提供的 defineAsyncComponent 方法
import { defineAsyncComponent } from "vue"
const LoginPopup = defineAsyncComponent(() => import("./components/LoginPopup.vue"))
使用异步组件之前主页面打包完资源包6M
使用异步组件之后主页面打包完资源包，把页面挂载的组件单独打包
三、分包策略
其实异步组件就是vue的一种分包策略，但是由于前期考虑不足，导致开发完成后遇到严重的性能问题，这时候才考虑性能的优化方案，使用vue异步组件之后，发现存在bug，因为引入组件都使用了ref标记，由于ref在组件没有实例的时候是获取不到的，所以会报undeifiend。没办法只能通过vite工具来实现，在vite运行时是基于ESMoudle，打包是基于rollup，所以配置rollup打包即可。如下设置即可分割单个vue文件，比较过后与异步组件分割的文件大小几乎一致。
// vite.config.ts
build: {
// rollup 配置
rollupOptions: {
output: {
manualChunks(id: any): string {
if (id.includes("style.css")) {
// 需要单独分割那些资源 就写判断逻辑就行
return 'src/style.css';
}
if (id.includes("HelloWorld.vue")) {
// 单独分割hello world.vue文件
return 'src/components/HelloWorld.vue';
}
// 最小化拆分包
if (id.includes("node_modules")) {
return id
.toString()
.split("node_modules/")[1]
.split("/")[0]
.toString();
}
}
}
}
}
分包之前，只有一个主页js+css两个资源包，首屏加载请求时间需要1.5s，点击登录等2s才有反应，而且这个时间是对网速有一定要求的，网络延迟高甚至要等7-8s，这对于用户体验来说是非常差的。
分包之后响应时间不到1s，虽然还很慢，但是请求高并发使请求时间趋于稳定，最大的文件体积不到原来的1/10，更多的是文件的编译时间，请求资源时间不会有太大影响。
文章来源：https://www.toymoban.com/news/detail-707449.html
最后
前端的优化方案肯定不止这些，还有许多包括webpack的代码优化插件、删除打包后的map文件、脚本优化、静态资源优化、懒加载、预编译、SSR渲染等等方案，但是大的方面弄好这三个就可以了，其他都是需要在编码过程中需要注意与优化的细节。文章来源地址https://www.toymoban.com/news/detail-707449.html
到了这里，关于vue前端性能优化之分包策略、异步组件、Gzip压缩的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
