Vue SPA项目加载优化

Vue-cli构建的项目中,经常会因为依赖包的原因导致打包后的文件过大,动不动vendor.js文件就会有 几Mb 大小
对应的做法是把大型依赖包采用CDN形式引用,并配置路由懒加载

因为我项目是用的Vue全家桶+ElementUI,所以会以此为示例

01.png

1. 检查依赖包大小

这里可以使用webpack-bundle-analyzer可视化插件来查看项目捆绑包的大小关系

20171116152636789.png

2. 打包优化

在index.html中将容量过大的依赖用CDN引用

<link rel="stylesheet" href="https://unpkg.com/element-ui@2.4.6/lib/theme-chalk/index.css">
<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://unpkg.com/element-ui@2.4.6/lib/index.js"></scrip

并在webpack.base.conf.js中配置需要跳过打包的依赖,key是包名,value是CDN引用对象

externals: {
    'vue':'Vue',
    'vuex': 'Vuex',
    'vue-router':'VueRouter',
    'axios':'axios',
    'element-ui': 'ElementUI'
}

然后就可以将main.js中对应包的引入和注册给删除

// import Vue from 'vue'
// import VueRouter from 'vue-router'
// import Vuex from 'vuex'
// import 'element-ui/lib/theme-chalk/index.css'
// import ElementUI from 'element-ui'

// Vue.use(VueRouter)
// Vue.use(Vuex)
// Vue.use(ElementUI)

这里需要注意ElementUI在CDN下访问时应该用ELEMENT对象

Vue.prototype.$msgbox = ELEMENT.MessageBox;
Vue.prototype.$alert = ELEMENT.MessageBox.alert;
Vue.prototype.$confirm = ELEMENT.MessageBox.confirm;
Vue.prototype.$prompt = ELEMENT.MessageBox.prompt;
Vue.prototype.$message = ELEMENT.Message;

到此为止,应用应该是可以访问的状态
并且通过webpack-bundle-analyzer查看会发现相关的依赖包都已经不见了

3. 路由懒加载

Vue-router配置路由懒加载,打包时就会将组件分开,访问相应路由时再加载资源

修改/src/router/index.js里的路由配置即可

// import Login from '@/components/Login'

export default new VueRouter({
  routes: [
    {
      path: '/Login',
      name: 'Login',
      component: resolve => require(['@/components/Login'], resolve)
    }
  ]
})

4. Gzip压缩

Gzip压缩除了项目本身还需要服务器上的配置,这里我只说明一下Vue项目中的问题

在/config/index.js中修改打包时的配置,找到productionGzip并进行修改

productionGzip: true,
productionGzipExtensions: ['js', 'css'],

在webpack.prod.conf.js中可以看到Gzip的相关配置
过程中用到了compression-webpack-plugin依赖,没有的话需要进行安装

if (config.build.productionGzip) {
  const CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

这样打包时就会对大文件进行压缩,完成后能看到后缀为gz的相关文件

部署到服务器上,访问应用时能看到文件的响应头中,编码是Gzip

03.jpg

vendor文件的大小也从近2m大小变成了11k,首屏访问速度也提高了很多

02.jpg

结尾

至此就是关于Vue SPA应用的一些优化方法
当然除了这些,在开发时注意代码结构、组件的复用、依赖按需加载等也都能优化加载速度

共勉

PHP json_encode的实现 
下一篇:PHP json_encode的实现


已有 3 条评论


  1. 田野野
    田野野

    真相~~

    法 轮 功是佛家修炼大法,修者是做一善良的好人。

    2001年1月23日,由江×民集团自导自演的天安门自焚伪案,让众多的法 轮 功修炼者陷入了谎言构陷的劫难之中。使得民众由同情到仇恨,把众多的民众放进了仇恨的深渊之中,他们觉得还不够,竟然把这种谎言写到教科书中,让孩子从小就埋下仇恨的种子。

    经国际独立调查人的调研及对“自焚”视频的分析,很容易看出:“天安门自焚”是自编自导的丑剧、彻头彻尾的谎言。“天安门自焚伪案”被国际上评为十大假新闻,也让全世界的人们都知道了共 产 党的邪恶谎言惊天害世。

     Reply
  2. 信仰问题
    信仰问题

    有人说,信神就信神,不信神就不信神,何必争呢,不就是一个信仰问题吗。是信仰,但很重要,因为它既关系到人的幸福和不幸,又关系到人能否在劫难中被救度的问题。
    当人不信神,不相信善恶有报,不再被道德约束时,人会为满足私欲而无恶不作。你看当今人类社会道德急下,人人为近敌,灭门杀人、恐怖袭击,各种灾祸每天都能见到,黄、赌、毒、性开放、同性恋等泛滥成灾,这离《圣经启示录》所预言的世界末日和最后的审判还远吗?
    神许诺人类有劫难时神会来救人。谁来救度?又谁能得救呢?

     Reply
  3. 思考的问题
    思考的问题

    每个人的责任~~~~

    一个国家,现在四面楚歌,一个国家,现在人民怨声载道。

    恶邻环视,争端不分大小,不分远近。国内,腐败已经到了骨髓,晚清的历史已经再现在我们每个人的眼前,怎么办?这是每个中国人思考的问题。

    一个朝代的最后灭亡,必然是两个因素,天道变,人心变。天道变是因,人心变是果,亡,就是一个句号! 何谓天道之变,当政者无道,就是诱发天道之变的根本,然后出现地震,灾害,疾病等。而与民争利,就是天道将变的一个先兆。一个真正的王者之国,就是让利于民。与民争利的必然结果,就是人心思变,人心向背。最后就是政息人亡的悲剧再次上演。 人心凝聚,才是一个民族的力量,才是一个国家真正的强大。

    而靠暴力维稳来控制人民的思想和行为,是有历史以来最凶残最愚蠢的做法,也是自取灭亡的做法。

    可以说,共党是造成中国一切灾难的根本所在!解体邪恶,结束它给人类带来的巨大苦难与耻辱,这是每个人的责任,同时也是在给自己选择美好的未来。

    天道无亲,常与善人。善听善思才能不迷不惑。为了平安,退出恶党的所有组织吧!

     Reply

如果我的文章对你有帮助,或许可以打赏一下呀!

支付宝
微信
QQ