Vuejs学习笔记(三)-17.vuecli 2 打包-路由懒加载

一、vuecli 2 打包

npm run build进行打包，打包完成后检查dist下的包

dist/static/css   dist/static/js

 

 原因，原来的webpack打包始终只有一个文件，会导致文件过大，而这里vue cli2对包进行了分包，可以方便客户端浏览器加载。

分析下包：

css下是针对css文件的打包

js目录下有3个文件分别是：

app:指的是我们开发的application用到的js文件

vendor：指项目用到的第三方组件js文件，如 vue,vue-router等

manifest：指的是底层支撑文件，比如commonjs转成es5的方法代码。

 

二、app中按组件分别打包

背景：用到的页面和组件时，才下载组件对应的JS文件

术语：路由懒加载，用到时再加载。

实现很简单：

const Home ()=>import('../components/Home.vue')

import Vue from 'vue'
import VueRouter from 'vue-router'
// import Home from '../components/Home'
// import About from '../components/About'
// import User from '../components/User'

// 路由的懒加载
const Home = () => import('../components/Home')
const About = () => import('../components/About')
const User = () => import('../components/User')


Vue.use(VueRouter)

const routes = [
  {
    path: '',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/about',
    component: About
  },
  {
    path: '/user/:userName1',
    component: User
  }
]

const router = new VueRouter({
  routes,
  mode:'history'
})

export default router

重新打包：npm run build

检查打包文件