Vue脚手架优化cdn方式加速
2019-12-20 本文已影响0人
Jabo
前言
这几天忙着接手公司旧项目好久没写内容了，就项目代码冗余凌乱，实在无法升级维护下去了。老板决定让我重构撒。那就开干吧。
选型
在vue论坛逛了一圈最后决定vue-cli 3.x + element ui 方案。成熟方案更适合团队玩耍。
SPA 与 MPA
这个是一个考虑点，新手可能会蒙圈MPA是啥，Vue不是SPA开发模式吗？好像是那么一回事，我们初始化的项目已经官网是否都讲Vue SPA开发，但是VUE是渐进式开发核心是视图层。我们build出来的是依赖于 webpack ,而webpack是将所有的资源整合出来。所以就要更改webpack配置依赖是可以实现多页面开发的。
// vue.config.js
module.exports = {
...
// 构建多页时使用
pages: {
index: {
entry: 'src/main.js', // 入口
template: 'public/index.html', // 模板
filename: 'index.html',
title: 'model-project',
keywords: 'project',
description: 'Jabo'
},
subPage:{ ... } // 类似上面
},
}
MPA的好处自己百度撒，上面是核心配置，但是在最后定型时我选择了SPA【根据自己的业务场景】，
1、我们做的是后台管理系统，多SEO之类没要求
2、团队开发人员的习惯，MPA与SPA还是有点区别的
3、业务规模，MPA浪费了
but，我的目录结构还是构建趋于MPA模式，这样做的好处是后期扩展方便多了选择。
CND加速【重点】
很多小伙伴怕SPA的一个重要，打包后js巨大，首次打开龟速。所以不得不提的CND来了。这里已element ui 为例
// public/index.html
<!DOCTYPE html>
<html lang="zh">
<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.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<meta name="keywords" content="<%= htmlWebpackPlugin.options.keywords %>"/>
<meta name="description" content="<%= htmlWebpackPlugin.options.description %>">
<!-- 这里配置element ui style-->
<link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.13.0/theme-chalk/index.css">
</head>
<body>
<noscript>
<strong>We're sorry but model-project doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/vuex/3.1.2/vuex.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
<!-- 这里配置element ui js-->
<script type="text/javascript" src="https://cdn.bootcss.com/element-ui/2.13.0/index.js"></script>
</body>
</html>
// vue.config.js 重点
const externals = {
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex': 'Vuex',
'element-ui': 'ELEMENT',
}
module.exports {
...
configureWebpack: config => {
return {
externals: externals, // 重点
....
}
}
...
}
其他优化网上一堆就不哔哔了，不晓的可以加粉沟通哈。
