本文摘自PHP中文网，作者coldplay.xixi，侵删。
vue加载优化策略：1、路由懒加载；2、组件按需加载；3、使用CDN加速策略；4、使用【compression-webpack-plugin】将文件打包成gzip格式。
【相关文章推荐：vue.js】
vue加载优化策略：
方法一、路由懒加载
首屏加载慢的原因无非就是单页面应用需要加载完整个路由表上的页面，而路由懒加载就是来解决这个问题的。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。下面这个就是vue路由懒加载的一个具体例子。方法很简单，如果您不想深入了解，只需按照这个格式引入路由就可以了。如果您对路由懒加载感兴趣，请移步vue-router路由懒加载
方法二、组件按需加载
为什么要按需加载组件呢？原因也很简单，一些组件库包含丰富的组件，如果我们直接将其引入，不免会引入一些我们压根用不到的组件。这样打包起来体积会比较大，同样显得我们很不专业。因此按需引入就显得很必要了。我们现在就拿iview组件库为例，了解一下按需引入的流程。
1.首先引入按需加载工具 babel-plugin-import
babel-plugin-import是babel它会在编译过程中将 import 的写法自动转换为按需引入的方式。
1 |
|
2.在项目根目录创建.babelrc文件并配置按需加载内容
1 2 3 4 5 6 |
|
3.在main.js配置项目需要加载的组件
下面是iview的一个例子
这里需要注意全局注册的组件需要挂在到vue原型上，例如我们需要使用Notice组件，那我就需要
相关阅读 >>
更多相关阅读请进入《加载优化》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
