使用CDN加载第三方公共库优化项目体积

概述

在项目中会使用到很多的第三方库，将不怎么需要更新的第三方库脱离webpack打包，不被打入bundle中，从而减少打包时间，但又不影响运用第三方库的方式，例如import方式等

CDN网站

项目配置CDN

使用cdn加速主要是配置两个文件：

index.html
vue.config.js

vue.config.js配置

打包时排除某些导入的包

// 判断是否为生产环境production
const isProd = process.env.NODE_ENV === 'production'

module.export = defineConfig({
    chainWebpack: config => {
        // 判断是否为生产环境
        if (isProd) {
            // 使用html-webpack-plugin插件添加isProd属性，用来给index.html文件判断是否为生产环境
            // 是生产环境才引入外部CDN资源
             config.plugin('html').tap(args => {
               args[0].isProd = isProd
               return args
             })
            // 打包时，排除项目中引入的以下包
            config.externals({
                vue: 'Vue',
                'vue-router': 'VueRouter',
                Vuex: 'Vuex',
                axios: 'axios',
                'element-ui': 'ELEMENT'
            })
        }
    }
})

2.index.html中引入CDN

使用htmlWebpackPlugin.options.isProd判断当前是否为生产环境。是则引入cdn，不是则不引入。

<% if (htmlWebpackPlugin.options.isProd) { %>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.1/dist/vue-router.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuex@3.6.2/dist/vuex.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@1.1.3/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.10/lib/index.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mavon-editor@2.10.4/dist/mavon-editor.min.js">
    </script>
<% } %>