vue+webpack项目优化

vue+webpack项目优化

阅读下文之前，我已经假设你有了良好的webpack以及vue2.x基础，并且可以独立使用脚手架搭建一套SPA项目。vue项目优化的着手点主要涵盖以下几个方面：

• 打包优化
• 异步加载
• 页面切换时加loading特效
• 点击延迟
• inline manifest
• 逻辑代码优化

---

一、打包优化

方法为：在webpack的公共配置文件（一般为webpack.base.conf.js）的resolve下有extensions选项。数组中加入不需要打包的组件，并且在入口的html中使用cdn的方式引入即可，此时会发现打包出来的vender包会变小很多。我自己的示例为：

二、异步加载

所谓的异步加载组件，其实就是组件懒加载。可以理解为：当我需要使用组件的时候才进行加载。主要包含两部分：路由配置和子组件的调用。

• 路由配置

我们可以在router里使用如下写法来实现懒加载：

{
    path: '/portal/:system/home', //用户登入后的app首页
    component: (resolve) => require([