vue极致打包_Vue之不完美的极致优化

欢迎来到阿八个人博客网站。本

阿八个人博客

网站提供最新的站长新闻,各种互联网资讯。

喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术!

URL链接：https://www.abboke.com/jsh/2019/0909/111650.html

Vue之不完美的极致优化

如果我们的项目是用脚手架搭建的，大部分的优化脚手架都帮你做了

比如：图片转base64、代码压缩等

我今天想说的是一些要自己去优化的地方：

第三方按需加载，比如：Element按需加载，用了哪些组件就之引入哪些组件// main.jsimport { 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 会以