一.CDN的使用
(1)在package.json文件,scripts-build添加–report,yarn build结束后,在dist中会多出一个report.html文件。
"scripts": {
"pre": "cnpm install || yarn --registry https://registry.npm.taobao.org || npm install --registry https://registry.npm.taobao.org ",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build --report",
"lint": "vue-cli-service lint"
},
(2)打开report.html文件,包含文件分析图。
色块的大小代表js文件的大小,最大的两个js文件,里面都是一些第三方依赖包,将一些比较大的依赖包提取出来就可以减少chunk-vendors的大小。
(3)在vue.config.js中,使用externals来防止这些依赖包被打包。
解释一下:externals的值是个对象,其中的key是第三方依赖库的名称,同package.json文件中的dependencies对象的key一样。其中的value值可以是字符串、数组、对象(value值应该是第三方依赖编译打包后生成的js文件,然后js文件执行后赋值给window的全局变量名称)。
附上代码块
config.set('externals', {
vue: 'Vue',
'vue-router': 'VueRouter',
axios: 'axios',
'ant-design-vue': 'antd',
"moment": "moment",
'vuex': 'Vuex',
'jsoneditor': 'JSONEditor',
'echarts': 'echarts'
})
(4)找到一个开源的cdn加速服务(这里用到的是bootcdn,链接地址:这里是bootcdn链接)
index.html文件中引入cdn的js和css文件
注意:vue.config.js中,externals配置了,才可以引入cdn,且引入cdn的版本一定要和package-lock.json中模块的版本号一致,否则会报错,如果没有package-lock.json,则按照package.json文件中的来
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.1.6/vue-router.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.18.1/axios.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/ant-design-vue/1.7.2/antd.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/ant-design-vue/1.7.2/antd.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/locale/zh-cn.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.1.2/vuex.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jsoneditor/9.0.0/jsoneditor.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/jsoneditor/9.0.0/jsoneditor.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0-rc.1/echarts.min.js"></script>
注意:引入cdn也有可能会出现以下报错
1.Cannot read property 'catch' of undefined
检查一下引入cdn的版本与本地的版本是否一致,不一致就会导致这个错误
2.Cannot read property 'default' of undefined
这个报错跟引入cdn的顺序有关,引入的cdn,vue必须是放在第一位,moment.js必须放在ant-design-vue的前面,这个跟组件依赖息息相关