Vue脚手架优化cdn方式加速

前言

这几天忙着接手公司旧项目好久没写内容了，就项目代码冗余凌乱，实在无法升级维护下去了。老板决定让我重构撒。那就开干吧。

选型

在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,  // 重点
   ....
 }
}
...
}

其他优化网上一堆就不哔哔了，不晓的可以加粉沟通哈。

Vue脚手架优化cdn方式加速