|
目录
前端性能优化方案
1.在vue.config.js?里面的写入如下配置
? ? 使用externals?代码?在vue.config.js里面? 设置打包排除项
????使用此配置项? ?config.plugin('html').tap(args => { isProd args[0].isProd = true return args })? 做? ? ? 数据的真假，对public/index.html的?cdn外链? ?开发模式和发布模式的?引入和隐藏??
? ? 注意：开发模式? 的依赖文件?全部已经下载好了，在本地，如何public/index.html?里面还有cdn? 外链? 文件就会发生?错误
? ? 发布模式? 为了减少自身代码量 ，会引入外链cdn资源? ??
? ? 所有要对? cdn外链资源的引入?和不引入? 做一个判断
????
? ? module.exports?=?{
??chainWebpack:?config?=>?{
????//发布模式
????config.when(process.env.NODE_ENV?===?'production',?config?=>?{
??????//entry找到默认的打包入口，调用clear则是删除默认的打包入口
??????//add添加新的打包入口
??????config.entry('app').clear().add('./src/main-prod.js')
??????//使用插件
??????config.plugin('html').tap(args?=>?{
????????//添加参数isProd
????????args[0].isProd?=?true
????????return?args
??????})
??????//使用externals设置排除项
??????config.set('externals',?{
????????vue:?'Vue',
????????'vue-router':?'VueRouter',
????????axios:?'axios',
????????moment:?'moment',
????????lodash:?'_',
????????echarts:?'echarts',
????????nprogress:?'NProgress',
????????'vue-quill-editor':?'VueQuillEditor',
????????//?ElementUI:?'ElementUI?'
??????})
????})
????//开发模式
????config.when(process.env.NODE_ENV?===?'development',?config?=>?{
??????config.entry('app').clear().add('./src/main-dev.js')
??????//使用插件
??????config.plugin('html').tap(args?=>?{
????????//添加参数isProd
????????args[0].isProd?=?false
????????return?args
??????})
????})
??}
}
2.引入? 排除项相关的js文件和css样式 ， （引入到根目录的public/index.htm添加外部cdn引入代码）? ?
?? 使用htmlWebpackPlugin.options.isProd? 获取?vue.config.js文件里面的? isprod?数据的?变量? （进行开发模式?和? 发布模式的cdn资源的引入，?开发模式引入的js和css文件是本地的，发布模式引入的js和css文件是cdn外部连接的）
<!DOCTYPE?html>
<html?lang="en">
<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">
??<link?rel="icon"?href="dist/favicon.ico">
??<title><%=?htmlWebpackPlugin.options.isProd???''?:?'dev?-?'?%>电商后台管理系统</title>
??<%?if(htmlWebpackPlugin.options.isProd){?%>
??<!--?nprogress?的样式表文件?-->
??<link?rel="stylesheet"?href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css"?/>
??<!--?富文本编辑器?的样式表文件?-->
??<link?rel="stylesheet"?href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css"?/>
??<link?rel="stylesheet"?href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css"?/>
??<link?rel="stylesheet"?href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css"?/>
??<link?rel="stylesheet"?href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css"?/>
??<script?src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
??<script?src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>
??<script?src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
??<script?src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
??<script?src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>
??<script?src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
??<!--?富文本编辑器的?js?文件?-->
??<script?src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>
??<script?src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>
??<!--?element-ui?的?js?文件?-->
??<script?src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script>
??<!--?//?-->
??<script?src="https://cdn.bootcss.com/moment.js/2.24.0/locale/af.js"></script>
??<%?}?%>
</head>
<body>
??<noscript>
????<strong>Web</strong>
??</noscript>
??<div?id="app"></div>
</body>
</html>
3.删除掉? 发布模式下的mian.js?里面的? 相关引入的css样式，?相关引入的js样式?不用删除
前端性能优化方案
const isProduction = process.env.VUE_APP_MODE === 'production'
const cdn = {
// 忽略打包的第三方库
/**
* externals 对象属性解析：
* '包名' : '在项目中引入的名字'
* 以element-ui举例 我再main.js里是以
* import ELEMENT from 'element-ui'
* Vue.use(ELEMENT, { size: 'small' })
* 这样引入的，所以我的externals的属性值应该是ELEMENT
*/
externals: {
vue: 'Vue',
vuex: 'Vuex',
'vue-router': 'VueRouter',
axios: 'axios',
'element-ui': 'ELEMENT'
},
js: [
'https://cdn.jsdelivr.net/npm/vue',
'https://unpkg.com/vue-router/dist/vue-router.js',
'https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js',
'https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js',
'https://unpkg.com/element-ui@2.13.2/lib/index.js'
],
css: [
'https://unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css'
]
}
module.exports = {
chainWebpack: (config) => {
if (isProduction) {
config.plugin('html').tap((args) => {
args[0].cdn = cdn
return args
})
}
config.plugin('html').tap(args => { // 所有环境配置统一的title
args[0].title = '外部联网协议配置系统'
return args
})
}
configureWebpack: config => {
config.externals = cdn.externals
}
}
在index.html里这样写
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="./reset.css">
<title><%= htmlWebpackPlugin.options.title %></title>
<!-- 使用CDN的CSS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style">
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
<% } %>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> 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) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
</body>
</html>
这样就成功的配置了生产环境第三方库采用cdn引入。能有效减小打包出来的文件体积，我的从2.6MB?=>?1.7MB?，减少了34%
|