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([