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')
1 import Vue from 'vue' 2 import VueRouter from 'vue-router' 3 // import Home from '../components/Home' 4 // import About from '../components/About' 5 // import User from '../components/User' 6 7 // 路由的懒加载 8 const Home = () => import('../components/Home') 9 const About = () => import('../components/About') 10 const User = () => import('../components/User') 11 12 13 Vue.use(VueRouter) 14 15 const routes = [ 16 { 17 path: '', 18 redirect: '/home' 19 }, 20 { 21 path: '/home', 22 component: Home 23 }, 24 { 25 path: '/about', 26 component: About 27 }, 28 { 29 path: '/user/:userName1', 30 component: User 31 } 32 ] 33 34 const router = new VueRouter({ 35 routes, 36 mode:'history' 37 }) 38 39 export default router
重新打包:npm run build
检查打包文件
本文来自博客园,作者:kaer_invoker,转载请注明原文链接:https://www.cnblogs.com/invoker2021/p/14985912.html