如何加快Vue单页加载（和打包）速度

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

平仄_csdn

12932人浏览 · 2018-01-04 13:54:41

平仄_csdn · 2018-01-04 13:54:41 发布

在使用个人境外服务器运行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>

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

可见，处理前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>app</title>
</head>

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^