【前端优化】Externals 实现运行时加载依赖-优快云博客

webpack（vue-cli 自带）中的 externals 配置选项提供了从输出的 bundle 中排除依赖的方法。防止将某些（自己配置）依赖打包，而是在项目运行时（runtime）从外部加载这些依赖。

最直观的：减小 vue 项目 build 后的体积。

操作步骤：

配置 index.html

配置项目中的 public/index.html 文件，在其中的 head 标签中添加如下：

<!-- 使用CDN的CSS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
    <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
<% } %>

<!-- 使用CDN的JS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
    <script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>

配置 vue.config.js

在项目下的 vue.config.js 中添加如下：

// cdn预加载使用
const externals = {
    'vue': 'Vue',
    'axios': 'axios',
    'js-cookie': 'Cookies',
    'vue-router': 'VueRouter',
    'ant-design-vue': 'antd',
    'mavon-editor': 'MavonEditor',
    'showdown': 'showdown',
}
const cdn = {
    css: [
        'https://unpkg.com/ant-design-vue@1.6.5/dist/antd.min.css'
    ],
    js: [
        'https://unpkg.com/vue@2.6.11/dist/vue.min.js',
        'https://unpkg.com/axios@0.19.2/dist/axios.min.js',
        'https://cdn.bootcss.com/js-cookie/2.2.1/js.cookie.min.js',
        'https://unpkg.com/vue-router@3.3.4/dist/vue-router.min.js',
        'https://unpkg.com/ant-design-vue@1.6.5/dist/antd.min.js',
        'https://unpkg.com/mavon-editor@2.9.0/dist/mavon-editor.js',
        'https://unpkg.com/showdown@1.9.1/dist/showdown.js',
    ]
}
module.exports = {
    publicPath: '/', 
    outputDir:'dist',
    devServer: {
        host: "127.0.0.1",
        port: 8089,
    },
    ...
    chainWebpack: config => {
        config
            .entry('app')
            .clear()
            .add('./src/main.js')
        // 通过externals加载外部CDN资源
        config.set('externals', externals)
        config.plugin('html').tap(args => {
            args[0].cdn = cdn
            return args
        })
    }
}