vue代码优化问题

vue代码优化问题

一、vue代码层面

1、路由懒加载

当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

2、代码模块化

咱们可以把很多常用的地方封装成单独的组件，在需要用到的地方引用，而不是写过多重复的代码，每一个组件都要明确含义，复用性越高越好，可配置型越强越好，包括咱们的css也可以通过less和sass的自定义css变量来减少重复代码。

3、for循环设置key值

在用v-for进行数据遍历渲染的时候，为每一项都设置唯一的key值，为了让Vue内部核心代码能更快地找到该条数据，当旧值和新值去对比的时候，可以更快的定位到diff。

4、更加理解Vue的生命周期

vue组件销毁时，会自动解绑他的全部指令及时间-，但是仅限于时间本身的事件，定时器的销毁需要手动去除

不要造成内部泄漏，使用过后的全局变量在组件销毁后重新置为null

5、可以使用keep-alive

keep-alive是Vue提供的一个比较抽象的组件，用来对组件进行缓存，从而节省性能。

6、节流防抖

7、图片的懒加载

使用vue-lazyload库

8、无状态的组件标记为函数式组件

可以提高性能，减少内存的消耗

9、合理利用计算属性的依赖缓存

二、打包层面

查看打包文件结构 和 各种文件的比例

这里推荐使用 ​​webpack-bundle-analyzer​​，通过她可以查看打包文件的模块组成，找出不和时宜的存在，然后优化她。

首先 npm install --save-dev webpack-bundle-analyzer然后运行 ​​​npm run build --report​​ 命令会自动打包，并弹出网页（包含打包文件图）

这里是因为 webpack-bundle-analyzer 的配置 vue-cli(2.0)已经帮你配置好了，传入一个report参数 就可以启动了

1使用cdn的方式外部加载一些资源

比如vue-router、axios等Vue的周边插件，在webpack.config.js里面，externals里面设置一些不必要打包的外部引用模块。然后在入门文件index.html里面通过cdn的方式去引入需要的插件

externals: { 'vue': 'Vue', 'vue-router': 'VueRouter', 'vuex': 'Vuex', 'axios': 'axios',}

2、不让css打包在一起(让css文件和单文件打包在一起)

默认css会打包到一个css 里面，一个就太大了所以 在 webpack.prod.conf.js 里面把所有块打包在一起设置为false

allChunks: false,

3、不生成.map文件

webpack默认会生成map文件，map文件是用来调试代码的，把productionSourceMap设置为false。此外，这里还要注意sourcemap的配置分 开发（dev）和线上（build）两个地方配置，开发我们就不管了，就用默认的，线上我们是不需要这个代码的。

4、减少图片使用

因为对于网页来说，图片会占用很大一部分体积，所以，优化图片的操作可以有效的来加快加载速度。可以用一些css3的效果来代替图片效果，或者使用雪碧图来减少图片的体积。

5、按需引入

咱们使用的一些第三方库可以通过按需引入的方式加载。避免引入不需要使用的部分，无端增加项目体积。比如在使用element-ui库的时候，包括loadsh等工具库可以只引入需要用到的组件。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。