Vue打包CDN加速优化

我会带着你远行 2023-06-27 03:18 49阅读 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>
            
            <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
            <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
            <% } %>
        </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，49人围观）

还没有评论，来说两句吧...

相关阅读

相关 CDN加速配置记录

自己的笔记！！！！！！！！！！！！！！！！！！！！！！！！！！！！不是广告！！！！！！！！！！！！！！！！！！！！！！不要乱审核好吗？？？？？？？？？？？？？？？？

缺乏、安全感/ 2024年04月06日 14:08/ 0 赞/ 105 阅读

相关 Vue打包CDN加速优化

vue.config.js const isProduction = process.env.NODE_ENV === 'production'; con

我会带着你远行/ 2023年06月27日 03:18/ 0 赞/ 50 阅读

相关 CDN（加速）

什么是CDN 虽然前面通过了压缩代码的手段来减小网络传输大小，但实际上最影响用户体验的还是网页受此次打开时的加载等待。导致整个问题的根本是网络传输过程耗时大，CDN的作

た入场券/ 2023年06月17日 10:58/ 0 赞/ 79 阅读

相关 Web前端性能优化之CDN加速

1、什么是CDN？　　在介绍CDN加速之前，我们先来简单的了解一下什么是CDN？CDN（Content Delivery Network）即内容分发网络，其基本思路是尽可能

柔情只为你懂/ 2022年08月09日 09:26/ 0 赞/ 415 阅读

相关什么是CDN加速？

CDN概况 CDN的全称是Content Delivery Network，即内容分发网络。 CDN加速主要是加速静态资源，如网站上面上传的图片、媒体，以及引入的一些Js、

柔光的暖阳◎/ 2022年05月29日 09:49/ 0 赞/ 422 阅读

相关什么是CDN及CDN加速原理

随着互联网的发展，用户在使用网络时对网站的浏览速度和效果愈加重视，但由于网民数量激增，网络访问路径过长，从而使用户的访问质量受到严重影响。特别是当用户与网站之间的链路被突发

落日映苍穹つ/ 2022年05月11日 09:18/ 0 赞/ 427 阅读

相关什么是CDN加速

CND概况 CDN的全称是Content Delivery Network，即内容分发网络。 CND加速主要是加速静态资源，如网站上面上传的图片、媒体，以及引入的一些Js、

我不是女神ヾ/ 2022年05月11日 09:18/ 0 赞/ 442 阅读

相关 CDN缓存加速原理

CDN（网站加速） 1.1 什么是CDN CDN的全称Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输

我就是我/ 2022年01月26日 11:04/ 0 赞/ 378 阅读

相关 [网站加载优化]公共CDN库/Nginx启用Gzip/全站CDN加速

前言接触到CDN的起因：我自己搭建的网站`https://price.monitor4all.cn/`网页打开的速度一直比较慢，经查证是我的网站有很多静态js大文件

妖狐艹你老母/ 2022年01月20日 04:15/ 0 赞/ 271 阅读

相关 [网站优化实战]公共CDN库/Nginx启用Gzip/全站CDN加速

> 本文公众号来源：Rude3Knife 作者：蛮三刀把刀 > > > > > 网站加载优化的过程（主要针对静态资源），思路可以借鉴一下！ ![640?wx\_

超、凢脫俗/ 2021年09月30日 23:22/ 0 赞/ 368 阅读