L'article est synchronisé sur le compte officiel : Meng Meng Da Caotou General, bienvenue pour faire attention
⚡️ Utilisez Vite
Il y a quelque temps, l'échafaudage du projet react qui était pratiqué depuis deux ans et demi a été remplacé par vite.
Utilisez d'abord vite pour créer le cadre de projet de base
npm create vite@latest my-vue-app --template react-ts
Copiez directement le répertoire de travail src
Configurez ensuite l'alias de résolution de chemin couramment utilisé
// vite-config,ts
alias: [
...(
Object.entries({
'@': path.resolve('src'),
}).map(([key, val]) => ({ find: key, replacement: val }))
),
],
extensions: [".js", ".ts", ".tsx", ".jsx", ".d.ts"],
À ce stade, la page est accessible, mais il y aura toujours des erreurs liées à ts.
Ajoutez simplement la configuration suivante dans tsconfig.json :
"paths": {
"@/*": ["./src/*"]
},
Pour que ci/cd fonctionne normalement, il est également nécessaire de changer le répertoire par défaut du package par défaut du projet de dist à build
// vite-config,ts
export default defineConfig({
build: {
outDir: './build',
}
})
L'ensemble du processus est rapide,
processus d'optimisation des performances
Ensuite, j'ai exécuté la commande d'emballage et l'ai déployée sur le serveur pour voir
Sans aucune optimisation, la taille du package est de 6,7 M, soit 0,4 M de moins que celle de la version Webpack.
Après déploiement, le score de performance de vite version lighthouse est de 59 points
Grâce à l'analyse, on constate qu'il n'y a pas de compression, qu'il y a trop de fichiers volumineux et que le chargement est trop lent, alors ensuite, nous compressons les fichiers.
configuration de compression
import viteCompression from 'vite-plugin-compression'
// https://vitejs.dev/config/
export default defineConfig({
build: {
outDir: './build',
rollupOptions: {
plugins: viteCompression({
verbose: true, // 是否在控制台中输出压缩结果
disable: false,
threshold: 10240, // 阈值，单位为b
algorithm: 'gzip', // 压缩算法，可选['gzip'，' brotliccompress '，'deflate '，'deflateRaw']
ext: '.gz', // 格式
deleteOriginFile: false // 是否清除源文件，简易这里保留
})
}
},
// ...
})
Tous les nginx ne sont pas livrés avec le module gzip, il est donc préférable de conserver les fichiers source au cas où vous en auriez besoin
après l'emballage
Dans le même temps, nginx doit activer la reconnaissance de la compression, sinon il ne sera pas valide.
server {
# 其他配置
gzip on;
gzip_comp_level 5;
gzip_min_length 256;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
# 其他配置
}
Après optimisation via des fichiers compressés, les performances ont été considérablement améliorées.
Mon projet n'a pas d'images, donc je n'utilise pas de plugin pour compresser les images. Vous pouvez utiliser vite-plugin-imagemin si nécessaire
comparaison des performances
Le score de performance de la version webpack de lighthouse est de 73 points
La version Webpack a terminé la compression du code, le fractionnement du code et le chargement paresseux des routes.
En comparant les deux versions, l'indice FCP de webpack est très bon, et l'indice TBT de Vite est très sain.
Même si, à l'heure actuelle, il n'y a pas beaucoup de différence entre les deux. Mais l'avantage de vite est évident,
L'utilisation de la configuration par défaut plus la compression du code peut être meilleure que Webpack après optimisation de la configuration.
penser
Le principal facteur affectant ce temps est que la longueur de la chaîne de requête est trop longue
Traduction : la chaîne de requêtes critiques ci-dessous montre quelles ressources sont chargées avec une priorité élevée. Envisagez de réduire la longueur de la chaîne, de réduire la taille de téléchargement des ressources ou de retarder le téléchargement des ressources inutiles pour améliorer le chargement des pages.
我们可以看到上面的请求链接，好几个都是只有几kb的小文件。 而这些小文件是外层index文件的依赖文件，所以会造成阻塞，小文件小文件众多阻塞的时间就越久。
vite 将文件根据路由切割成多个子模块，每个模块的文件来自于不同的依赖包的子集。并且通过import的方式，引入到主文件中。
如果我们在小文件引入前，将小文件进行合并，就可以有效缩短链长度，从而更进一步的提高性能。目前还没有类似的插件。
今天的分享就到这里了，感谢你的阅读！