vuejs项目打包与首屏加载优化

php中世界最好的语言
Freigeben: 2018-05-02 15:33:24
Original
1233 Leute haben es durchsucht

这次给大家带来vuejs项目打包与首屏加载优化,vuejs项目打包与首屏加载优化的注意事项有哪些,下面就是实战案例,一起来看一下。

一:使用CDN资源

我们在打包时,会将package.json里,dependencies对象里插件打包起来,我们可以将其中的一些使用cdn的方式加载,例如不想把vue,axios,vuex,vue-router打包到我们项目中,我们需要这样:

1:打开webpack.base.conf.js

module.exports = { externals: { ‘vue‘: ‘Vue‘, ‘axios‘: ‘axios‘, ‘vuex‘: ‘Vuex‘, ‘vue-router‘: ‘VueRouter‘ } }
Nach dem Login kopieren

2:打开router/index.js。注销掉以下两行

//import Vue from ‘vue‘ //Vue.use(Router)
Nach dem Login kopieren

3:如果你使用了vuex,把vuex/index.js(命名各有不同)中的Vue.use(Vuex)注销了

Vue.use(Vuex)

打包后可能出现的问题

1:被keep-alive包围的元素无法显示

原因:暂不明。

解决方法:不用keep-alive

推荐阅读:Vue项目使用CDN优化首屏加载问题

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

vue减少对服务器请求次数

vue-cli有哪些方式缩短首屏加载时间

Das obige ist der detaillierte Inhalt vonvuejs项目打包与首屏加载优化. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!