如何加快Vue单页加载(和打包)速度

在使用个人境外服务器运行vue项目时,会遇到打包的vendor.js过大而导致无缓存加载时,页面会空白数秒之久。
解决这个问题有2个思路:1是通过压缩混淆代码、gzip实际减小代码大小;2是将部分不会改动的文件提出,放到CDN上。
这里列举几种解决方案。(uglify由于vue-cli已默认包含,这里不写)

#1 gzip

使用gzip压缩vendor.js可以有效减小文件体积,一般能压缩70%左右。
可以选择使用nginx反向代理来做gzip功能。
也可以选择nodejs内部压缩。

const compression = require('compression');
app.use(compression());

#2 提取js/css到cdn

以一个vue项目为例。项目引用了vue、axios、iview、iview的css:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import iView from 'iview'
import 'iview/dist/styles/iview.css'

#2.1 提取js到外部,减小vendor.js体积

1. 在/build/webpack.base.conf.js中,增加externals:

module.exports = {
    externals: {
        'vue': 'Vue',
        'axios': 'axios',
        'iview': 'iview'
    }
}

注意,externals的键值对中,键应为在/src/main.js中import的名称,值为引用的外部文件export的名称。以cdn.bootcss.com的库文件为例,vue的导出名为Vue,mint-ui为MINT,vue-router为VueRouter。

2. 复制/index.html/index.dev.html,并修改/build/webpack.dev.conf如下:

plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      // template: 'index.html',
      template: 'index.dev.html',
      inject: true
    })
]

* 这是为了解决dev环境下,重复引用库的问题。

3. 在/index.html中,引入cdn文件

<body>
    <div id="app">div>
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js">script>
    <script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js">script>
    <script src="https://cdn.bootcss.com/iview/2.6.0/iview.min.js">script>
body>

处理前:
如何加快Vue单页加载(和打包)速度_第1张图片
处理后:
如何加快Vue单页加载(和打包)速度_第2张图片
可见,处理前vender.js大小148KB,处理后大小13.7KB。
另增加3个CDN文件,大小34.9KB、5.6KB、115KB,增加115.5KB。
总体积变化不大。将大体积文件放置在cdn上,减小了服务器流量压力,加快了不同地区网页加载速度。

#2.2 提取css到外部,减小app.css体积

/src/main.js中,前端框架的CSS引用,都可去除,并改为在/index.html中引用其CDN版本。
1. 去除/src/main.js中的CSS文件import,改为在开发环境下require

// import 'iview/dist/styles/iview.css
if (process.env.NODE_ENV === 'development') {
  require('mint-ui/lib/style.css')
}

2. 在/index.html中,引入cdn文件

<head>
    <link href="https://cdn.bootcss.com/iview/2.6.0/styles/iview.css" rel="stylesheet">
    <title>apptitle>
head>

处理前:
这里写图片描述
处理后:
这里写图片描述

你可能感兴趣的:(经验技巧)