一、快速启动项目
1.1基础Webpack配置
// webpack.config.js
module.exports = {mode: 'production', // 生产模式自动压缩代码devtool: 'source-map', // 生成源码映射方便调试optimization: {splitChunks: {chunks: 'all', // 自动拆分第三方库代码minSize: 20000 // 超过20KB的文件才拆分}}
}简单解释：
- mode：production： 帮助压缩JS代码
- splitChunks ：大文件拆成小文件，加快加载的速度
- source-map：代码压缩后找出错误位置
1.2Vite基础优化
// vite.config.js
export default {build: {rollupOptions: {output: {manualChunks: {// 手动拆分常用库lodash: ['lodash'],axios: ['axios']}}}}
}简单理解：
- 把lodash和axios单独打包
- 浏览器可以缓存常用库，下次访问速度更快
二、图片加载优化
2.1简单懒加载
<img src="placeholder.jpg" <!-- 占位图 -->data-src="real-image.jpg" <!-- 图片地址 -->loading="lazy" <!-- 浏览器自动懒加载 -->alt="示例图片"width="600" height="400"
>效果：
- 页面滚动到图片附近时才开始加载图片
- 首次加载时只下载占位图
2.2格式转换
<!-- 优先使用现代格式 -->
<picture><source srcset="image.webp" type="image/webp"> <!-- 优先用webp --><img src="image.jpg" alt="后备图片"> <!-- 不支持的浏览器用jpg -->
</picture>对比：
- webp比jpg的占用内存小
- 主流浏览器都支持webp
- 较老旧浏览器会自动退回到jpg
三、代码优化技巧
3.1组件懒加载
// 路由配置文件中
const Home = () => import('./views/Home.vue') // 按需加载
const About = () => import('./views/About.vue')const routes = [{ path: '/', component: Home },{ path: '/about', component: About }
]效果：
- 首次只加载首页代码
- 点击关于页面时才加载对应的代码
- 减少初始下载文件的大小
3.2事件监听优化
// 点击按钮示例
const button = document.getElementById('myButton')// 直接绑定匿名函数
button.addEventListener('click', () => {console.log('Clicked!')
})// 使用具名函数
function handleClick() {console.log('Clicked!')
}button.addEventListener('click', handleClick)// 移除监听时更方便
button.removeEventListener('click', handleClick)说明：
- 匿名函数无法去移除从而导致内存泄漏
- 具名函数可以更精准的控制监听器
四、实用缓存策略
4.1浏览器缓存设置
// 服务器设置缓存头（Node.js示例）
app.use('/static', express.static('public', {maxAge: '1y', // 缓存1年immutable: true // 内容永不改变
}))规则：
- /static 目录下的文件会被浏览器长期缓存
- 更新文件时需要修改文件名
4.2简单本地存储
// 缓存API返回的数据示例
async function getData() {const cacheKey = 'cachedData'// 1. 先尝试读取缓存const cached = localStorage.getItem(cacheKey)if (cached) {return JSON.parse(cached)}// 2. 没有缓存则请求接口const data = await fetch('/api/data').then(res => res.json())// 3. 保存到本地存储localStorage.setItem(cacheKey, JSON.stringify(data))return data
}场景：
- 数据不经常变化时使用
- 首次加载后后面在访问速度更快
- 设置合理的过期时间
五、常见优化误区
5.1不要过度优化
// 过度拆分文件
splitChunks: {minSize: 1000 // 把1KB的文件也拆分
}建议：
- 合理的设置拆分值（20KB以上）
- 太多小文件会增加请求的次数
5.2避免重复加载
<!-- 重复引入相同库 -->
<script src="lodash.js"></script>
<script src="another-plugin.js"></script>
<!-- another-plugin.js内部也包含了lodash -->解决：
- 使用打包工具的自动去重
- 定期的检查package.json依赖
前端项目优化是一个综合性的工作，涉及代码层面、资源加载、构建工具以及缓存策略等多个方面。通过合理运用代码拆分、懒加载、图片优化、构建工具优化以及缓存策略等技术，可以显著提升前端项目的性能，为用户提供更加流畅、高效的体验。在实际项目中，需要根据项目的特点和需求，有针对性地选择和实施优化策略，不断提升前端应用的质量。