- 按需引入
导入‘element’类似组件时,不要整个导入使用,只需要导入使用的组件 - 论组件的复用性:全局组件与局部组件
在项目中无论vue,react都会存在组件复用性问题,这里主要说在vue中的说明
全局组件:在main.js进行全局注册组件,达到其他组件可以无需再次注册可直接使用
优点:无需重复注册
缺点:每次刷新都会加载组件,增加加载消耗
适应场景:消息提示,使用频率高
局部组件:在需要使用的地方注册并使用
优点:只会在调用的地方刷新才会加载,减少加载消耗
缺点:每次使用都需要重新注册
适应场景:使用频率一般较少
import Modal from "@/components/modal.vue";
createApp(App)
.component("Modal", Modal)
.mount("#app");
- 压缩代码
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_console: true,
pure_funcs: ['console.log']
},
sourceMap: false
})
vue中在vue.config中
productionSourceMap: false,
//其中sourceMap: false是禁用除错功能。
//如果设为true,在部署包中会生成.map结尾的js文件。它用于在代码混淆压缩的情况下仍可进行调试。
//这个功能虽好,但会大大增加整体资源包的体积,所以将其禁用。
- 路由懒加载
方式1
import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
// {
// path: '/',
// name: 'HelloWorld',
// component: HelloWorld
// }
{
path: '/',
name: 'HelloWorld',
component: () => import('@/components/HelloWorld.vue')
}
]
})
- CND加速
在index.html中导入CND资源
<body>
<div id="app"></div>
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
</body>
在bulid/webpack.base.conf.js文件中,增加externals,将引用的外部模块导入,并去掉原来main.js中的import导入
module.exports = {
entry: {
app: './src/main.js'
},
externals:{
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex':'Vuex'
}
去掉import,如:
// import Vue from 'vue'
// import vue-router from 'vue-router'
//vue.js、Router.js等文件会分别由一个线程进行加载。且因为使用了CDN,减轻了带宽压力
- 页面优化
v-once只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能
v-cloak当加载缓慢时可能出现显示vue源码的情况{{name}},可以使标签加载完成前保持隐藏状态
keep-alive用于缓存组件,tabs组件中就可以适用,减少渲染 - 渲染优化
vue刷新机制根据双向绑定的变量改变刷新,跟react不太一样,不需要触发视图更新的变量直接使用let/const 创建即可,
高频刷新功能可根据情况控制刷新频率,例如数据累计后触发data的数据变更