vue中使用cdn优化
参考
在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首开的体验。
解决方法是，将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来，达到加速首开的目的。
1、在index中将资源引入
- 在public文件中添加引入的包
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- 这里为引入的包 -->
<% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
<link rel="stylesheet" href="<%=css%>" as="style">
<% } %>
<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%=js%>"></script>
<% } %>
<!---->
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title></title>
</head>
2、vue.config.js中做配置
- 在vue.config.js中做配置，在module.exports中添加configureWebpack和pages这两个属性。
module.exports = {
publicPath: BASE_URL,
// tweak internal webpack configuration.
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
// 如果你不需要使用eslint，把lintOnSave设为false即可
lintOnSave: false,
chainWebpack: config => {
config.resolve.alias
.set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
.set('_c', resolve('src/components'));
config.module
.rule('vue')
.use('iview')
.loader('iview-loader')
.options({ prefix: false });
},
// 设为false打包时不生成.map文件
productionSourceMap: false,
// 这里写你调用接口的基础路径，来解决跨域，如果设置了代理，那你本地开发环境的axios的baseUrl要写为 '' ，即空字符串
devServer: {
proxy: ''
},
configureWebpack: {
// 打包忽略文件
externals: {
"vue": "Vue",
"view-design": "iview",
"vue-router": "VueRouter",
"axios": "axios",
"vue-i18n": "vue-i18n",
"vuex": "Vuex",
"echarts": "echarts",
"js-cookie": "Cookies",
"accounting-js": "accounting",
"dayjs": "dayjs",
}
},
pages: {
index: {
entry: 'src/main.js',
template: 'public/index.html',
filename: 'index.html',
chunks: ['chunk-vendors', 'chunk-common', 'index'],
cdn: {
css: [
'https://cdn.jsdelivr.net/npm/view-design@4.5.0/dist/styles/iview.css'
],
js: [
"https://cdn.jsdelivr.net/npm/vue@2.5.10/dist/vue.min.js",
"https://cdn.jsdelivr.net/npm/vue-router@3.0.1/dist/vue-router.min.js",
"https://cdn.jsdelivr.net/npm/view-design@4.5.0/dist/iview.min.js",
"https://cdn.jsdelivr.net/npm/vue-i18n@7.8.0/dist/vue-i18n.min.js",
"https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js",
"https://cdn.jsdelivr.net/npm/vuex@3.0.1/dist/vuex.min.js",
"https://cdn.jsdelivr.net/npm/echarts@4.0.4/dist/echarts.min.js",
"https://cdn.jsdelivr.net/npm/view-design@4.5.0/dist/locale/en-US.js",
"https://cdn.jsdelivr.net/npm/view-design@4.5.0/dist/locale/zh-TW.js",
"https://cdn.jsdelivr.net/npm/view-design@4.5.0/dist/locale/zh-CN.js",
"https://cdn.jsdelivr.net/npm/js-cookie@2.2.0/src/js.cookie.min.js",
"https://cdn.jsdelivr.net/npm/accounting-js@1.1.1/dist/accounting.umd.min.js",
"https://cdn.jsdelivr.net/npm/dayjs@1.7.7/dayjs.min.js",
]
},
}
}
}
3、将原有的依赖包引用去掉
- 将引入的cdn中，所有本地引入的依赖都注释掉或删掉。
import App from './App'
import router from './router'
import store from './store'
// import iView from 'view-design'
import i18n from '@/locale'
import config from '@/config'
import importDirective from '@/directive'
import {
directive as clickOutside
} from 'v-click-outside-x'
import installPlugin from '@/plugin'
// import 'view-design/dist/styles/iview.css';
import './index.less'
import '@/assets/icons/iconfont.css'
- 如遇到本地引入的依赖在其他处使用的情况，可在控制台输出this查找到vue的实例，看挂载到vue实例上的依赖的名称，然后替换掉。（如果本地引入命名和vue实例上依赖命名一样，此步可忽略）
image.png
<!-- 此处的iview在使用中 -->
Vue.use(iview, {
i18n: (key, value) => i18n.t(key, value)
})
网友评论