Vue打包CDN加速优化

最新推荐文章于 2024-08-22 11:45:33 发布

lihefei_coder

最新推荐文章于 2024-08-22 11:45:33 发布

阅读量2.3k

点赞数

分类专栏： vue webpack 文章标签： vue webpack cdn 加速打包优化

本文链接：https://blog.csdn.net/lihefei_coder/article/details/103806332

版权

vue 同时被 2 个专栏收录

53 篇文章 5 订阅

订阅专栏

webpack

6 篇文章 0 订阅

订阅专栏

vue.config.js

const isProduction = process.env.NODE_ENV === 'production';
const cdn = {
    css: [],
    js: [
        'https://cdn.bootcss.com/vue/2.6.10/vue.runtime.min.js',
        'https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js',
        'https://cdn.bootcss.com/vuex/3.1.2/vuex.min.js',
        'https://cdn.bootcss.com/axios/0.19.0/axios.min.js'
    ]
};
module.exports = {
    chainWebpack: config => {
        // 生产环境配置
        if (isProduction) {
            // 生产环境注入cdn
            config.plugin('html').tap(args => {
                args[0].cdn = cdn;
                return args;
            });
        }
    },
    configureWebpack: config => {
        if (isProduction) {
            // 用cdn方式引入
            config.externals = {
                vue: 'Vue',
                vuex: 'Vuex',
                'vue-router': 'VueRouter',
                axios: 'axios'
            };
        }
    }
};

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
        <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
        <title>Vue打包CDN加速优化</title>
    </head>
    <body>
        <noscript>
            <strong>We're sorry but longdian-management doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
        </noscript>
        <div id="app"></div>
        <!-- built files will be auto injected -->
        <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
        <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
        <% } %>
    </body>
</html>