vue前端性能优化之cdn的使用
优化原因
项目中首页加载过慢， 原因是js,css 静态资源第一次加载的时间长
vue.config.js
'use strict'
...
...
const cdn = {
js_cdn: [
'https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js',
'https://unpkg.com/[email protected]/dist/vue.js',
'https://unpkg.com/[email protected]/dist/vue-i18n.js',
'https://cdn.staticfile.org/vue-router/3.0.6/vue-router.min.js',
'https://cdn.staticfile.org/axios/0.18.1/axios.min.js',
'https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0-rc.1/echarts.js',
'https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js',
'https://cdn.staticfile.org/vuex/3.1.0/vuex.min.js',
'https://unpkg.com/[email protected]/lib/index.js',
'https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts-liquidfill.min.js',
'https://unpkg.com/[email protected]/lib/umd/locale/zh-CN.js',
'https://unpkg.com/[email protected]/lib/umd/locale/zh-TW.js',
'https://unpkg.com/[email protected]/lib/umd/locale/en.js'
],
css_cdn: [
'https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css',
'https://cdn.jsdelivr.net/npm/[email protected]/lib/theme-chalk/index.css'
],
lang: true
}
// If your port is set to 80,
// use administrator privileges to execute the command line.
// For example, Mac: sudo npm run
// You can change the port by the following methods:
// port = 9528 npm run dev OR npm run dev --port = 9528
// const port = process.env.port || process.env.npm_config_port || 8080 // dev port
// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {
..
css: {
...
},
configureWebpack: {
....
},
chainWebpack(config) {
...
....
config
// https://webpack.js.org/configuration/devtool/#development
.when(process.env.NODE_ENV === 'development',
config => {
config.devtool('cheap-source-map')
config.entry('app').clear().add('./src/main.js')
}
)
config
.when(process.env.NODE_ENV !== 'development',
config => {
config.entry('app').clear().add('./src/prod.js')
config.set('externals', {
vue: 'Vue',
vuex: 'Vuex',
'vue-router': 'VueRouter', // 必须是VueRouter，不然打包后运行会报错
axios: 'axios',
echarts: 'echarts',
nprogress: 'NProgress',
moment: 'moment',
'vue-i18n': 'VueI18n'
})
config.plugin('html')
.tap(args => {
args[0].cdn = cdn
return args
})
......
}
)
}
}
index.html
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="pragram" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
<% for(let i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css_cdn) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css_cdn[i] %>" rel="preload" as="style">
<link href="<%= htmlWebpackPlugin.options.cdn.css_cdn[i] %>" rel="stylesheet">
<% } %>
<% for(let i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js_cdn) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.js_cdn[i] %>" rel="preload" as="script">
<% } %>
<link rel="icon" href="<%= BASE_URL %>newlogo.svg">
<script src="<%= BASE_URL %>config.js"></script>
<title><%= webpackConfig.name %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js_cdn) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js_cdn[i] %>"></script>
<% } %>
</body>
国际化，关于elementUI
经历了n次的失败，辛酸路程也不想在这里 谈，直接上代码
i18n/index.js
这里为了开发和生产模式都可以正常使用element的国际化，所以设置ELEMENT常量，
开发环境中：
-------------- 直接获取node_modules中语言包js的文件位置，导入（这里使用require动态导入），记得.default[都是被坑出来的]。
生产环境中：
--------------由于elementui使用cdn，怎会自动导入全局window.ELEMENT，这里切勿直接写ELEMENT，这样获取到的不是你想要的。
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookies from 'js-cookie'
import en from './config/en'
import zhmo from './config/zh-mo'
import zh from './config/zh'
Vue.use(VueI18n)
const ELEMENT = window.ELEMENT || process.env.NODE_ENV === 'development' && {
lang: {
zhCN: require('element-ui/lib/locale/lang/zh-CN').default,
zhTW: require('element-ui/lib/locale/lang/zh-TW').default,
en: require('element-ui/lib/locale/lang/en').default
}
}
// 创建vue-i18n实例
const i18n = new VueI18n({
// 设置默认语言
locale: Cookies.get('language') || 'zh',
// 添加多语言
messages: {
zh: {
...zh,
...ELEMENT.lang.zhCN
},
zhmo: {
...zhmo,
...ELEMENT.lang.zhTW
},
en: {
...en,
...ELEMENT.lang.en
}
},
silentTranslationWarn: true
})
export default i18n
不是vue文件中，使用ElementUI的组件
比如你想在定义axios中的文件中，使用Message去给出一些提示，那么你就需要根据是否为开发环境，而对获取element的这个常量就该选取不同的位置
const ELEMENT = window.ELEMENT || process.env.NODE_ENV === 'development' && require('element-ui')
