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-09-08 21:44:15

    git pre-commit hook failed 解决办法

    今天在上传项目的时候在commit阶段遇到一个问题,无论是在Sourcetree上传还是用命令git commit -m 'xxx'都报了一下错误:

  • 2019-09-08 21:45:31

    git index.lock

    因是在你进行某些比较费时的git操作时自动生成，操作结束后自动删除，相当于一个锁定文件，目的在于防止对一个目录同时进行多个操作。 有时强制关闭进行中的git操作，这个文件没有被自动删除，之后你就无法进行其他操作，必须手动删除，进入.git文件中删除，打开显示隐藏文件。如果没有看见.git文件夹，可以直接用命令rm -f ./.git/index.lock。之后就可以正常使用。 ———————————————— 版权声明：本文为CSDN博主「李瑞豪」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/qq_39520417/article/details/81941111

  • 2019-09-09 05:28:54

    IntelliJ IDEA 进阶教程： 语言注入

    我真的太久没发 IntelliJ 的教程了，最近 Sakura 同学找我帮他配 IntelliJ ，我秀了一下技术，假装自己是老司机。 然后发现 Language Injection 这个非常好用的功能我居然没写教程（很明显，一堆人不知道这个东西）， 于是我又开始写教程了。 本文多图。

  • 2019-09-09 05:32:55

    SrpingBoot 热启动与热部署

    当我们已经启动了一个服务，然后修改代码之后，会自动重新部署。Spring项目通常有新内容修改后需要重新编译然后运行。通过配置Spring boot的热启动配置，可以实现自动编译重启项目，通常要比手动停止，启动项目快。