Vite笔记之23-前端性能优化

性能优化说的什么

开发时构建速度优化，yarn dev
- webpack工夫很重，cache-loader （两次构建代码没有变化，直接使用缓存，不调用loader）多线程构建
- vite 按需加载
页面性能指标
- 首屏 fcp first content paint
  - 懒加载代码实现
  - http 优化
    - 协商缓存
    - 强缓存
- 最大元素时长 lcp。largest content paint
js 指标
写法上
防抖截流 forEach 使用lodash中的
作用域控制

const arr = [1,3,3]
for(let i=0;i<arr.length;i++){} // 每次访问arr
for(let i=0,len=arr.length;i<len;i++){} // 只访问一次

css
- 继承属性
- 避免过深嵌套
生产优化
- rollup 优化体积图片压缩 cdn 分包 tree-sharking

2. 分包策略

浏览器缓存策略

静态资源 —→ 名字没有变化需要清除缓存

hash 内容变化 hash不同
业务代码经常变化，重新打包生成新的文件，内容中使用lodash，但是lodash不会变化，所以每次lodash重新请求

分包就是把一些不会常规更新的文件，进行单独打包处理

例如：

main.ts中引入lodash：

import { forEach } from 'lodash'

const mainArr = []

forEach(mainArr, elm => {
	console.log('打印***elm1', elm)
})

内容变化打包的名字就会变化，此时没有分包，lodash会打包在main.js中，每次内容变化，都是需要加载不变化的lodash。

2.1使用分包配置

import { defineConfig } from 'vite'
import checker from 'vite-plugin-checker'

export default defineConfig({
	build: {
		minify: false,
		rollupOptions: {
			output: {
				manualChunks: id => {
					console.log('打印***id', id)
					// ts认为当前环境不在es6以后，需要配置lib
					if (id.includes('node_modules')) {
						return 'vendor'
					}
				}
			}
		}
	},
	plugins: [
		checker({
			typescript: true
		})
	]
})

id几个模块

分包打包后，vendor不会变化，浏览器不会一致请求新的

多入口分包, 默认进行分包

vite.config.ts


import { defineConfig } from 'vite'
import checker from 'vite-plugin-checker'
import path from 'path'

export default defineConfig({
	build: {
		minify: false,
		rollupOptions: {
			input: {
				main: path.resolve(__dirname, './index.html'),
				product: path.resolve(__dirname, './src/product.html')
			},
		}
	},
	plugins: [
		checker({
			typescript: true
		})
	]
})

3. gzip压缩

文件资源大，静态资源进行压缩，服务器进行压缩 ——→ 浏览器进行解压缩，nginx需要进行相应配置。此处打包是服务器下开启gzip传输，如果有服务器直接拿而不需要自己进行压缩。

chunk 打包的js文件，块最终映射成js文件，但chunk不是js文件

静态资源发送直接使用 gz压缩文件，设置相应头 content-enconding gzip 告诉浏览器使用的压缩文件，体积不大不要用gzip

4. 动态导入

vite 按需加载，和动态导入原理一样。是es 原生支持 code-split

用在路由里，没有进入路由，将script标签不放入body中，造成异步加载

5. cdn加速

内容分发网络

yarn add vite-plugin-cdn-import -D

import { defineConfig } from 'vite'
import importToCDN from 'vite-plugin-cdn-import'

export default defineConfig({
    plugins: [
            importToCDN({
                    modules: [
                            {
                                    name: 'lodash',
                                    var: '_', // 默认导出的名称
                                    path: '<https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.fp.min.js>' // cdn地址
                            }
                    ]
            }),
})
// 步骤 会注入标签 修改rollup配置 上述注入这边
build: {
        rollupOptions: {
                external: ['lodash'],
                externalGlobal: {
                        var: '_', // 默认导出的名称
                        path: '<https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.fp.min.js>' // cdn地址
                },
        }
},

配置后