本文介绍了如何从代码、webpack配置和Web技术三个方面优化Vue项目。包括使用vue-lazyload实现图片懒加载，路由懒加载减少初始加载资源，利用keep-alive缓存组件，通过image-webpack-loader压缩图片，模板预编译提升运行效率，以及静态资源的缓存策略，旨在提升用户体验和加载速度。
我一般会从三个层面优化vue项目：
第一个代码层面的优化：
1.对于图片过多的页面，为了加快页面加载速度，在项目中使用 Vue 的 vue-lazyload 插件
2.对于路由过多，加载的资源过多的情况下，就把不同路由对应的组件分割成不同的代码块，使用路由懒加载
3.还可以利用keep-alive将不活动的组件缓存起来。在组件切换过程中将状态保留在内存中，防止重复渲染dom，减少加载时间及性能消耗
第二个从webpack 层面的优化：
1.在请求较大的图片资源的时候，加载会很慢，这时候我们可以用 image-webpack-loader 来压缩图片
2在打包时，可以直接把组件中的模板转换为render函数，这叫做模板预编译。这样一来，运行时就不再需要编译模板了，提高了运行效率。
第三个Web 技术层面的优化：
为了提高用户加载页面的速度，会对静态资源进行缓存
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
