vue关于首次加载很慢的优化方式

2019-03-01 14:05:18 阅读：673 来源： 互联网

标签：文件 vue vendor index js resolve 很慢加载

说方法之前肯定得搞清楚什么导致了项目首次加载慢，我看了打包过程，然后发现字体文件过大，这是其一，还有我引入了echarts三方库，这是其二，打包后发现vendor.js文件过大，这是其三，整个项目加载app.js之前首先得加载vendor.js和app.css，所以vendor.js文件过大会造成项目加载特别慢。好原因我知道了，然后就对症下药。。。。。。。。。

对于我使用的特殊字体文件我使用的是字蛛webfont字体压缩的方式来减小文件大小：

字蛛官网：http://font-spider.org/#use

详细操作我推荐看这篇文章：https://blog.csdn.net/qq_33744228/article/details/80613496

我按照这样做了，但是报错了：

<web font not found>

弄到这里我只能呵呵。。。。。。。。

不得行，我必须搞清楚怎么回事啊。。。。。。。。。然后倒腾了半天发现我特么在项目文件夹上一个目录操作 font-spider ./font.html 。。。。。。。。。。被自己蠢哭了，然后cd 项目名，再执行命令就ok了。最后成功把字体文件压缩了。

对于第三方库，推荐使用CDN,然后通过配置webpack来减小vendor的文件大小

把不常改变的库放到index.html中，通过cdn引入：

<body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
  <script src="https://cdn.bootcss.com/vue/2.6.6/vue.min.js"></script>
  <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
  <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
</body>

然后找到build/webpack.base.conf.js文件，在module.export={}中添加以下代码：

'echarts':'echarts'后面这个为名字，在文件夹里可以随便使用echarts，比如：

在main.js中使用：Vue.prototype.$echarts = echarts --- 这个名字要和上面那个对应

配置这个的意思是告诉webpack，这几个不要跟我打包了，不然你又要打包到vendor里面去，搞得别人体重变重了那么多。声明一下，把其他地方引入vue呀axios呀这些都删了，你在index.html中已经引入了就不需要再引入，如果不删了，webpack又会打包进去。。。。。打包后发现我的vendor文件变得小多了哈哈哈哈。如果还想优化，请继续往下看：

1.路由懒加载：

这个网上很多，在路由router/index.js中：

import Index from '../components/Index'
import { resolve } from 'path';

Vue.use(VueRouter)

export default new VueRouter({
  routes: [
    {
      path: '/',
      name: '首页',
      component: Index,
      meta:{
        index:1
      }
    },
    {
      path: '/bannerinfo',
      name: '图片详细信息1',
      component:resolve => require(['@/components/BannerInfo'],resolve),
      meta:{
        index:1
      }
    },
    {
      path: '/callback',
      name: '接收参数',
      component:resolve => require(['@/components/callback'],resolve),
      meta:{
        index:1
      }
    },
    {
      path: '/banner2info',
      name: '图片详细信息2',
      component:resolve => require(['@/components/Banner2Info'],resolve),
      meta:{
        index:1
      }
    },
    {
      path: '/changestrategy',
      name: '修改实盘',
      component:resolve => require(['@/components/ChangeStrategy'],resolve),
      meta:{
        index:1
      }
    }
  ]
})

这个方法会把原本打包到一个app.js文件分开成多个js文件打包，这样会减小app.js文件的大小，但是不会减小整个js文件夹的大小。通过这种方式可以做到按需加载。因为刚开始进入页面就会把所有路由资源都加载，如果项目过大，加载得内容就会很多，等待的时间就很长，导致给用户不好的体验效果，所以我们特别推荐使用按需加载路由。。！！！！！！

2.工程文件打包的时候不生成.map文件

npm run build编译之后，我们查看打包的文件，发现有很多.map的文件，这些文件也占了很多空间。.map文件的作用是帮助编译后的代码调试，但是我们上线的代码已经调试完成，就不需要再生成.map文件了。

在config/index.js文件中将

的值修改为false,编译的时候就不会生成.map文件了。

感谢这些作者提供的文章，让我解决我遇到的问题。感谢前面探路的人！！！

解决vendor文件过大：http://www.php.cn/js-tutorial-405428.html

vue上线首页加载慢问题优化：https://blog.csdn.net/feiyu_may/article/details/80987404

解决vendor文件过大：https://blog.csdn.net/qq_26026975/article/details/79381555

vue首次加载缓慢的解决方法：https://www.jianshu.com/p/6262772bdc9c

vue中特殊字体压缩与字蛛的使用：https://blog.csdn.net/qq_33744228/article/details/80613496

字体下载：https://www.fontke.com/family/536638/style/

标签：文件,vue,vendor,index,js,resolve,很慢,加载
来源： https://blog.csdn.net/qq_41999617/article/details/88052534

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue关于首次加载很慢的优化方式

对于我使用的特殊字体文件我使用的是字蛛webfont字体压缩的方式来减小文件大小：

对于第三方库，推荐使用CDN,然后通过配置webpack来减小vendor的文件大小

感谢这些作者提供的文章，让我解决我遇到的问题。感谢前面探路的人！！！