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

谁借莪１个温暖的怀抱￠ 2023-07-18 14:07 42阅读 0赞

#### 一、通过 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' 
        })
    })

1.  在 `public/index.htm`l 文件的头部，添加如下的 `CDN` 资源引用，代码如下：

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

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

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

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

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

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

<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.8.2/theme-chalk/index.css" /> 
         
        <script src="https://cdn.staticfile.org/element-ui/2.8.2/index.js"></script>