浅谈Vue 项目性能优化 经验

3、路由懒加载：

官方上提示有两种，

一种是：这种因为没有声明打包的文件名称，所有的路由就会打包到同一个js文件中

const Foo = () => import(‘./Foo.vue‘)

另一种是：是把组件按块封装，/* webpackChunkName: "group-foo" */，就是声明的组件块，如果有多个的名称，就会 打包多个js文件

const Foo = () => import(/* webpackChunkName: "group-foo" */ ‘./Foo.vue‘)

我自己实现：

const ColMoney = () => import(/* webpackChunkName: "Proscenium" */ ‘@/components/pages/Proscenium/ColMoney/MoneyList‘)

const Prepay = () => import(/* webpackChunkName: "LearnTube" */ ‘@/components/pages/LearnTube/Student/Prepay‘)

只写了两个例子，这样就会生成两个js文件，等去点击那个路由时，才会加载相应的js文件。

以上是我亲自试过的，

我在网上看过很多的博文，说：

1、引入cdn加速，也就是vender bundle ，我目前还没有试过，https://segmentfault.com/a/1190000009443366?utm_source=tag-newest 大家可以去这个上面看看，我觉得可行。

2、对项目代码中的JS/CSS/SVG(*.ico)文件进行gzip压缩，我试过，但是没成功，npm install --save-dev compression-webpack-plugin一直报错，我就放弃了，大家如果想看，可以去 https://www.jianshu.com/p/41075f1f5297 这个链接看看。