vue/vue-cli打包性能优化，CDN引入。_<% for (var i in htmlwebpackplugin.options.cdn &&

项目场景：

首屏时间长，Vue打包后依赖包vendors或app.js文件过大，导致的首屏时间长，优化方案。本文主要用于个人记录自己的学习过程，日后好复习，所以写的比较潦草，如果有某些地方看不懂的，欢迎评论提问。

---

分析原因：

通过在vue.config.js中配置的webpack-bundle-analyzer看

// 查看打包文件体积大小
chainWebpack:config => {
        config
            .plugin('webpack-bundle-analyzer')
            .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
            }
1
2
3
4
5
6

通过这张图我们可以看到，第三方依赖的包太大了，导致网页加载缓慢。我们用performance测一下，我用的测试服务器在湖北武汉，所以网络延迟会很高，让我们看一下加载这个文件需要多久。


可以看到加载这个文件用了9s多，白屏时间更是达到了12s。

1. 那我们怎么才能把3.11MB的包拆开呢？我们可以把不经常变动的、全量引入的第三方库打包的时候不打进去，而是通过CDN的方式引入。然后把CDN通过ejs或者html-webpack-plugin注入的方式，引入到index.html的入口文件中去。
2. 把一些只用了某些库的一小部分，但是全量引入的库做一些处理，比如我这里的lodash.js。
3. 利用babel-pluign-component做到UI库的按需引入，我这里element-ui没用几个组件，所以决定不抽离成CDN的方式引入了。
4. 老生常谈的，Vue-router官网也说过的路由懒加载这里就不介绍了这种方式了。
   如图我们可以看到一些使我们vendor.js文件过大的几个主要的依赖，和一些可以抽离出CDN的，和一些只使用了一部分，但全量引入的，比如lodash.js
   

externals

通过webpack的externals来给webpack设置打包规则，这里面设置的包都不会被打入进去，直接忽略。我自己定义了一个CDN.js文件来维护我需要引入的CDN。

const CDN = require("./static/cdn.js")
 configureWebpack:{
        externals:CDN.getExternals()
    }
1
2
3
4

module.exports = {
    "vue": {
        name: "Vue",
        "cdn": {
            "css": {
                default: ""
            },
            "js": {
                default: "https://cdn.jsdelivr.net/npm/vue"
            }
        }
    },
    "vue-router": {
        name: "VueRouter",
        "cdn": {
            "css": {
                default: ""
            },
            "js": {
                default: "https://cdn.jsdelivr.net/npm/vue-router@3.5.1/dist/vue-router.min.js"
            }
        }
    },
    "ant-design-vue": {
        name: "antd",
        "cdn": {
            "css": {
                default: "https://cdn.jsdelivr.net/npm/ant-design-vue@1.5.3/dist/antd.css"
            },
            "js": {
                default: "https://cdn.jsdelivr.net/npm/ant-design-vue@1.5.3/dist/antd.js"
            }
        }
    },
    getExternals: function () {
        const exArr = ["getExternals"] //不遍历的属性
        const resEx = {};
        for (let i in this) {
            if (!~exArr.indexOf(i)) {
                resEx[i] = this[i].name
            }
        }
        return resEx   //{key:val}把key,this[key].name变成这种形式
    },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

这里明显的看到，我选择不把Vue、Vue-router、ant-design-vue这些不打如到bundle里，而是通过CDN的方式引入。

html-webpack-plugin

在webpack里是用html-webpack-plugin来生成index.html入口文件或者往里注入资源啥的，但是在vue-cli中我们想改webpack中的一些配置得按照vue-cli的方式来，根据vue-cli官网提供的。

// vue.config.js 官网说明
module.exports = {
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        return [/* 传递给 html-webpack-plugin's 构造函数的新参数 */]
      })
  }
}
1
2
3
4
5
6
7
8
9
10

我们配置
 chainWebpack: config => {
 const cdn = { js: [], css: [] }
        for (let i in CDN) { //CDN上面已经给代码了，这个CDN文件是我自己定义的
            console.log(i)
            let cItem = CDN[i].cdn;
            if (cItem) {
                cItem.js.default && cdn.js.push(cItem.js.default)
                cItem.css.default && cdn.css.push(cItem.css.default)
            }
        }
         config.plugin('html').tap(args => {
            args[0].cdn = cdn
            return args
        })
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在public中的index.html入口文件中加上代码

 <% for(var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
        <link rel="stylesheet" href="<%=htmlWebpackPlugin.options.cdn.css[i] %>" >
 <% } %>
      
<% for (var i in htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
        <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
1
2
3
4
5
6
7

好了大功告成，把这三样不打入bundle中，在index.html用CDN的方式引入。

再次打包

我们在进行打包，观察vendor.js文件的大小变化

直接重3.11MB减少到1.34MB

---

按需引入lodash

很简单，因为我用到的lodash的地方很少，所以我在用的loadsh的地方,直接这么引用。之前是全局加载所以把整个loadsh的文件全引进来了

import _ from "lodash"
改为
import cloneDeep from "lodash/cloneDeep"
1
2
3

让我们重新打包看看效果

又由1.34MB缩小到1.27MB了。好了我们在用performance来看看效果如何

---

performance

performance是我们网页运行时的性能检测工具，使用performance别忘了使用浏览器的无痕模式，防止别的工具影响performance的准确性。

从图片可以看到，虽然首屏时间还有4.7s但是相比较刚开始的12s来说已经优化非常大了，而且vendor文件加载时间只需要3.71s，少了5s多。