vue 加载太慢_vue 首次加载缓慢/刷新后加载缓慢 原因及解决方案_个人文章 - SegmentFault 思否...

vue 首次加载缓慢/刷新后加载缓慢 原因及解决方案

最近做项目发现一个问题,页面每次刷新后加载速度都非常慢,20s左右,在开发环境则非常流畅,几乎感觉不到,本文参考望山的各种方案优化

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 = () &