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

时间 2019-11-06

标签 vue 首次加载缓慢刷新缘由解决方案繁體版

原文原文链接

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

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

1,关闭打包时生成的map文件

在config/index.js文件中讲productionSourceMap设置为false,再次打包便没有了map文件html

2,vue-router路由懒加载

懒加载的实现方式有不少种,这里简单说三种实现方法vue

vue异步组件
import()
webpack的require.ensure()

vue 异步组件

vue异步组件技术也就是异步加载,vue-router配置路由,使用veu的异步加载技术,能够实现按需加载,可是这种状况下一个组件生产一个js文件node

/* vue异步组件技术 */
{
  path: '/index',
  name: 'index',
  component: resolve => require(['@/views/index'],resolve)
}
复制代码

使用import

组件懒加载方案二webpack

// 下面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文件ios

/* 组件懒加载方案三: 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')
}
复制代码

CDN引用

CDN能够减小代码体积加快请求速度,使用CDN主要解决两个问题,打包时间太长,打包后代码体积太大,请求很慢,还有就是回避服务器带宽问题web

具体步骤

<!DOCTYPE html><html>
    <head>
        <meta charset="utf-8">
        <title>vue-manage-system</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
        <script src="https://cdn.bootcss.com/vue/2.5.3/vue.js"></script>
        <script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>
        <script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
        <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.4.0/theme-chalk/index.css">
        <script src="https://cdn.bootcss.com/element-ui/2.4.0/index.js"></script>
复制代码

若是提示Element未定义,是由于Element依赖Vue，vue.js须要在element-ui以前引入，因此vue.js也要改成cnd的引入方式.vue-router

而后,修改/build/webpack.base.conf.js中修改配置。给module.exports添加externals属性(详见https://webpack.docschina.org/configuration/externals/)，其中键是项目中引用的，值是所引用资源的名字。须要注意的是资源名须要查看所引用的JS源码，查看其中的全局变量是什么，例如element-ui的全局变量就说ELEMENTnpm

module.exports = {
   context: path.resolve(__dirname, '../'),
   entry: {
     app: './src/main.js'
   },
   externals: {
     'vue': 'Vue',
     'vue-router': 'VueRouter',
     'ElementUI': 'ELEMENT',
     'axios': 'axios',
   }
 }
复制代码

而后删除原先的import,若是不删除原先的import，项目仍是会从node_modules中引入资源。也就是说不删的话，npm run build时候仍会将引用的资源一块儿打包，生成文件会大很多。仍是删了好。element-ui

参考文章列表:感谢大神们 vue页面首次加载缓慢缘由及解决方案 vue项目实现按需加载的3种方式：vue异步组件、es提案的import()、webpack的require.ensure()

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

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

1,关闭打包时生成的map文件

2,vue-router路由懒加载

vue 异步组件

使用import

webpack的require.ensure()

CDN引用

具体步骤

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

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