Vue之不完美的极致优化
如果我们的项目是用脚手架搭建的,大部分的优化脚手架都帮你做了。比如:图片转base64、代码压缩等。
我今天想说的是一些要自己去优化的地方:
第三方按需加载,比如:Element按需加载,用了哪些组件就之引入哪些组件。
// main.js import { Button, Select } from 'element-ui'; Vue.component(Button.name, Button); Vue.component(Select.name, Select); // 或写为 Vue.use(Button) Vue.use(Select)
CDN引入: 可以把一些文件或者第三方库采用CDN的方式引入。比如:
Vue
、VueX
、VueRouter
等。在
index.html
文件中通过script
标签引入CDN,最后再Webpack
中配置一下,打包的时候不要把通过CDN引入的文件或者第三方库打包进去。// webpack配置 externals: { 'vue': 'Vue', 'vuex': 'Vuex', 'vue-router': 'VueRouter' },
路由懒加载
// webpackChunkName是把组件按组分块,后面接的字符串是块的名称 const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue') const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue') const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue') const router = new VueRouter({ routes: [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar }, { path: '/baz', component: Baz }, ] })
异步组件
new Vue({ // ... components: { 'my-component': () => import('./my-async-component') } })
- 尽量少的并且合理的使用
Watch
、computed
。比如:你只是想监听对象里面一个key的变化,就没必要监听整个对象。因为这会增加依赖的数量,增加开销。 - Object.freeze() 冻结只是用来展示的数据,Vue就不会把数据转换成响应式的,从而减少依赖的数量,提升性能。
- 服务器渲染或者预渲染。可以参考这篇文章:Vue SSR指南。
- 当页面过于复杂时,可以把模块拆分成组件,模块需要的功能,在组件内部来实现,可以完美配合异步组件使用。
- 把组件的css卸载一个单独的文件内,再在组件内引入。组件内的 CSS 会以
<style>
标签的方式通过 JavaScript 动态注入。