vue项目首屏打开速度慢的解决方法

2020-01-17 21:15:52

参考地址 vue项目首屏打开速度慢的解决方法

最近接手了一个后台管理系统，技术栈主要是vue全家桶+elementui，老大打开测试环境页面的时候，说看到首页需要6秒钟，那如何进行优化呢？

首先我们需要安装webpack-bundle-analyzer

?

1
2
3
4
5
6
7
8
9
10
11
12
13
// webpack.prod.conf.js
if (config.build.bundleAnalyzerReport) {
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
// config/index.js
build: {
 // Run the build command with an extra argument to
 // View the bundle analyzer report after build finishes:
 // `npm run build --report`
 // Set to `true` or `false` to always turn it on or off
 bundleAnalyzerReport: process.env.npm_config_report
}

运行npm run build --report


我们可以看到，vendor中的elementui占了500k，怎么优化呢？

在webpack配置文件中增加，接下来就是见证奇迹的时刻。

?

1
2
3
4
5
externals: {
  'vue': 'Vue',
  'element-ui': 'ELEMENT',
  'axios': 'axios'
 },

再看一下我们的vendor体积


vendor一共才195k

那缺少的elementui文件去哪里找呢？答案是cdn引用。

之前项目里还有引用moment，但是这个库实在是太大了，在github上我找到一个跟momentapi完全一样的库，但是文件大小只要2kb。


其他优化方法还有ssr，这个最好用nuxtjs来做，自己配置ssr实在太麻烦了。


  • 精彩推荐

  • 2019-10-19 11:22:49

    window安装ffmpeg-concat出现的坑和解决办法

    最后还是选择了fluent-ffmpeg，没特效就没特效吧。最起码有声音吗。 ffmpeg-contact也可以有声音，但是需要先提取出来再合并进去，不知道能不能有效同步，果断放弃。

  • 2019-10-19 13:37:44

    v-model里使用过滤器

    档所述过滤器只能用在v-bind指令和{{}}表达式中，v-model中使用过滤器是一种思维误区。 因为v-model里实现数据显示和存储格式的转换应该是双向的。如下例：

  • 2019-10-19 16:35:45

    Vue.directive使用注意

    首先，Vue.directive要在实例初始化之前，不然会报错，还有，定义的指令不支持驼峰式写法，也会报下面同样的错，虽然在源码中没有找到在哪里统一处理大小写，但是在有关directive的方法中捕捉到的指令命名统一变为小写,所以，还是用'-'或者'_'分割吧。

  • 2019-10-21 08:39:54

    vue slot用法以及使用介绍

    通过上面的内容可以知道，在slot组件中引入了slot的子组件，而且又在子组件标签内添加了新的标签内容，但页面上并没有将子组件标签内的标签内容显示出来，

  • 2019-10-21 15:06:27

    yarn详细入门教程

    Yarn 是 Facebook, Google, Exponent 和 Tilde 开发的一款新的 JavaScript 包管理工具。就像我们可以从官方文档了解那样，它的目的是解决这些团队使用 npm 面临的少数问题，即：

  • 2019-10-23 10:20:48

    php 去掉 头尾 空格 2种方法

    看似很简单的问题，其实还是有点坑的，首先这里 空格转义，不是字符串，直接用trim()是去不掉。