路由的使用——路由懒加载:
import home from '@/components/home'(一般的引入组件方式)
const login = resolve => require(['@/components/login'], resolve)
const routes = [
{
path: '/',
name: 'home',
component: home
},
{
path: '/login',
name: 'login',
component: login
}
]
如果组件都直接如上import引入,打包时会把所有组件打成一个app.js,导致首页打开加载慢,移动端优化需注意。
路由懒加载:
使用异步组件,减少首页加载js大小,webpack分割代码打包,能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,另外打包的vendor.js文件是依赖的插件,去除不使用的,减少打包大小,
减少打包体积:组件异步加载;webpack 的压缩插件UglifyJsPlugin;服务器端还可以开启 gzip 压缩。