Vue项目上线优化2：通过externals加载外部cdn资源，减少引入的模块和依赖项占用内存

通过externals加载外部cdn资源，这种方式比引入代码更加优化，减少代码占用内存，适合在发布阶段使用（底部有优化对比图）。

1、为了区分发布模式和开发模式，可以先配置入口文件，在根目录vue.config.js中：

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.when(process.env.NODE_ENV === 'development',config=>{
            config.entry('app').clear().add('./src/main-dev.js')
        })
    }
}

2、使用externals设置排除必要项，在发布模式中使用（开发模式不影响）：

        //发布模式
        config.when(process.env.NODE_ENV === 'production',config=>{
            //entry找到默认的打包入口，调用clear则是删除默认的打包入口
            //add添加新的打包入口
            config.entry('app').clear().add('./src/main-prod.js')
            
            //使用externals设置排除项
            config.set('externals',{
                vue:'Vue',
                axios:'axios',
                'element-ui':'ElementUI',
                nprogress:'NProgress',
                'vue-quill-editor':'VueQuillEditor'
            })
        })

3、不使用引入代码的模式，所以在发布模式入口文件main-prod.js中对引用的模块或依赖进行注释或删除：

// import Vue from 'vue'
// import axios from 'axios'
// import ElementUI from 'element-ui';
//加载进度条
// import NProgress from 'nprogress'
// import 'nprogress/nprogress.css'
//富文本编辑器
// import VueQuillEditor from 'vue-quill-editor'
// require styles
// import 'quill/dist/quill.core.css'
// import 'quill/dist/quill.snow.css'
// import 'quill/dist/quill.bubble.css'

4、加载外部CDN，打开public/index.html添加外部cdn引入代码

<!-- 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" />
    <!-- element-ui 的样式表文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index.css" />

    <script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.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.staticfile.org/element-ui/2.8.2/index.js"></script>

–> 点击这里查询需要模块的cdn地址
5、附上我的项目使用优化前后对比：
优化前：

优化后：