vue项目上线优化之 externals 加载外部 CDN 资源以及 CDN 优化

一、通过 externals 加载外部 CDN 资源

1. 默认情况下，通过 import 语法导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功 后，单文件体积过大的问题。
2. 为了解决上述问题，可以通过 webpack 的 externals 节点，来配置并加载外部的 CDN 资源。凡是声明在externals 中的第三方依赖包，都不会被打包。
3. 在 vue.config.js 文件中，在 process.env.NODE_ENV的环境为 production时，通过 config.set 设置 externals，代码如下：

config.when(process.env.NODE_ENV === 'production', config => {
    config.entry('app').clear().add('./src/main-prod.js')
    config.set('externals', { 
        vue: 'Vue', 
        'vue-router': 'VueRouter', 
        axios: 'axios', 
        lodash: '_', 
        echarts: 'echarts', 
        nprogress: 'NProgress', 
        'vue-quill-editor': 'VueQuillEditor' 
    })
})

4. 在 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" /> 

5. 在 public/index.html文件的头部，添加如下的 CDN 资源引用，代码如下：

<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> 

二、通过 CDN 优化 Element UI的打包

1. 在按需加载Element UI以后，我们可以将 element-ui 中的组件，也通过 CDN 的形式来加 载，这样能够进一步减小打包后的文件体积，具体步骤是：

• 在 main-prod.js 中，注释掉 element-ui 按需加载的代码
• 在 index.html 的头部区域中，通过 CDN 加载 element-ui 的 js 和 css 样式、

2. 通过CDN 加载 js 和 css 样式的代码，如下所示：

    <!-- element-ui 的样式表文件 --> 
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index.css" /> 
    <!-- element-ui 的 js 文件 --> 
    <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>