[转载] vue 首次加载缓慢/刷新后加载缓慢
https://blog.csdn.net/qq_34846662/article/details/102926485
https://zhuanlan.zhihu.com/p/145959839
https://www.jianshu.com/p/6262772bdc9c
1,关闭打包时生成的map文件
在config/index.js
文件中讲productionSourceMap
设置为false
,再次打包便没有了map文件
2,vue-router路由懒加载
懒加载的实现方式有很多种,这里简单说三种实现方法
- vue异步组件
- import()
- webpack的require.ensure()
vue 异步组件
vue异步组件技术也就是异步加载,vue-router配置路由,使用veu的异步加载技术,可以实现按需加载,但是这种情况下一个组件生产一个js文件
/* vue异步组件技术 */
{
path: '/index',
name: 'index',
component: resolve => require(['@/views/index'],resolve)
}
使用import
组件懒加载方案二
// 下面2行代码,没有指定webpackChunkName,每个组件打包成一个js文件。
const Home = () => import('@/components/home')
const Index = () => import('@/components/index')
// 下面2行代码,指定了相同的webpackChunkName,会合并打包成一个js文件。 把组件按组分块
const Home = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home')
const Index = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index')
// router
{
path: '/about',
component: About
}, {
path: '/index',
component: Index
}
webpack的require.ensure()
使用webpack的require.ensure()技术,也可以实现按需加载.这种情况下,多个路由指定相同的chunkName会合并打包成一个js文件
/* 组件懒加载方案三: webpack提供的require.ensure() */
{
path: '/home',
name: 'home',
component: r => require.ensure([], () => r(require('@/components/home')), 'demo')
}, {
path: '/index',
name: 'Index',
component: r => require.ensure([], () => r(require('@/components/index')), 'demo')
}