项目开发完成
打包 :
- 用webpack做打包(把.vue, .js, .less ------> .js, .css, .html)
- 在项目中都会提供命令:
npm run build
打包优化:
- 在保证功能可用的前提下,让我们的文件尽可能小
- 在保证功能可用的前提下,让我们的页面显示出来的速度更快一些
打包之后,会得到dist目录,如果希望可以双击打开index.html,则需要提前在vue.config.js中配置:vue.config.js中
{
publicPath: './'
}
打包优化-路由懒加载
问题
{
path: '/login',
component: () => import('@/views/login/index'),
hidden: true
},
上边 component: () => import('@/views/login/index')
是什么意思呢?
与下边的写法有何不同?
const Login = import('@/views/login/index')
{
path: '/login',
component: Login,
hidden: true
},
什么是路由懒加载
一个路由对一个组件,表示一个页面。懒加载的意思是:只有在路由进入这个页面时,才去加载这个组件对应的资源。
路由懒加载中的魔法注释
通过在注释中指定webpackChunkName,可以人为设置这个文件的名字。如下是一个示例。
components = () => import(/* webpackChunkName:"login"*/ "../component/Login.vue");
小结
- 没设置路由懒加载前:所有页面对应的组件会全部打包到一个.js文件中
- 设置在路由懒加载后:页面对应的组件会全部打包到一个独立.js文件中,而且只有在进入这个路由页面之后才会加载。