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应用的一些优化方法
当然除了这些,在开发时注意代码结构、组件的复用、依赖按需加载等也都能优化加载速度

共勉

 SpringBoot 上Shiro结合JWT的鉴权方式
PHP json_encode的实现 
上一篇:SpringBoot 上Shiro结合JWT的鉴权方式
下一篇:PHP json_encode的实现


已有 4 条评论


  1. vultr
    vultr

    学习了 感谢分享

     Reply
  2. zyic
    zyic

    免费单号购买 不降权单号www.uudanhaowang.com

     Reply
  3. wbys
    wbys

    第一单号网提供快递单号、淘宝快递单号、拼多多单号www.01kd.com

     Reply
  4. sadq
    sadq

    顺丰 申通 圆通 中通免费快递刷单单号,支持淘宝 京东拼多多发货www.88danhaowang.com

     Reply

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

支付宝
微信
QQ