一、源码优化
- Vue路由设置成懒加载、当首屏渲染的时候,能够加快渲染速度
component: (r: any) => require.ensure([], () => r(require('../../views/login/'))),
3. 代码模块化、常用的地方封装成单独的组件,在需要用到的地方引用,而不是写过多重复的代码,每一个组件都要明确含 义,复用性越高越好,可配置型越强越好,css也可以通过less或者sass的自定义css变量来减少重复代码。
4. 理解Vue的生命周期、不要造成内部泄漏,使用过后的全局变量在组件销毁后重新置为null。
5. 可以使用keep-alive、keep-alive是Vue提供的一个比较抽象的组件,用来对组件进行缓存,从而节省性能。
二、打包优化
- 修改vue.config.js中的配置项,把productionSourceMap设置为false,不然最终打包过后会生成一些map文件,如果不关掉,生成环境是可以通过map去查看源码的,并且可以开启gzip压缩,使打包过后体积变小。
- 使用cdn的方式外部加载一些资源,比如vue-router、axios等Vue的周边插件,在webpack.config.js里面,externals里面设置一些不必要打包的外部引用模块。然后在入门文件index.html里面通过cdn的方式去引入需要的插件。
- 减少图片使用,因为对于网页来说,图片会占用很大一部分体积,所以,优化图片的操作可以有效的来加快加载速度。可以用一些css3的效果来代替图片效果,或者使用雪碧图来减少图片的体积。
- 按需引入,咱们使用的一些第三方库可以通过按需引入的方式加载。避免引入不需要使用的部分,无端增加项目体积。比如在使用element-ui库的时候,可以只引入需要用到的组件。