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‘
 }
}

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

//import Vue from ‘vue‘
//Vue.use(Router)

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

Vue.use(Vuex)

打包后可能出现的问题

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

原因：暂不明。

解决方法：不用keep-alive

感谢各位的阅读！关于“vuejs项目打包之后首屏加载优化的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！