vue项目首次运行到浏览器加载时间长！

最近做项目发现一个问题,页面每次刷新后浏览器加载速度都还好,但是，浏览器初次加载就花费了 6s 左右。

那么问题来了：在开发环境中还好，但是交付给用户之后用户的体验会很差，谁还会再用这个产品？在现在国内互联网的大趋势下，如果产品缺失了竞争力这个因素，就有可能被市场淘汰！

我有想过使用白屏的方式，可是中间加载的时间还是太长了，不满足用户要求，所以就在网上和各大博客间来回查阅，找到了合适的解决方法，也总结了下面的一些方法。

1、关闭打包时生成的map文件
在config/index.js文件中将productionSourceMap的值设置改为false,再次打包便没有了map文件
在这里插入图片描述

2、vue-router路由懒加载
懒加载的实现方式有很多种,这里简单说三种实现方法

(1) vue异步组件: import()
(2) webpack的require.ensure()
(3)vue 异步组件

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

方案一：vue异步组件技术（require）

{
    
    
  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()
使用webpack的require.ensure()技术,也可以实现按需加载.这种情况下,多个路由指定相同的chunkName会合并打包成一个js文件

{
    
    
  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')
}

3、CDN引用
CDN可以减少代码体积加快请求速度,使用CDN主要解决两个问题,打包时间太长,打包后代码体积太大,请求很慢,还有就是回避服务器带宽问题
示例

扫描二维码关注公众号，回复： 12044749 查看本文章

<!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的引入方式.

然后,修改/build/webpack.base.conf.js中修改配置。给module.exports添加externals属性，其中键是项目中引用的，值是所引用资源的名字。需要注意的是资源名需要查看所引用的JS源码，查看其中的全局变量是什么，例如element-ui的全局变量就说ELEMENT

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时候仍会将引用的资源一起打包，生成文件会大不少。还是删了好!

项目运行打包：
在这里插入图片描述
在打包之后，可以看出size和gzipped大小是有明显的减小，一般这种可以优化方式，浏览器首次加载可以提速在3s以内

vue项目首次运行到浏览器加载时间长！

猜你喜欢