优化-CDN使用

nodejs
589 词
优化-CDN使用

优化-CDN使用#

CDN定义 ：内容分发网络，指的是一组分布在各个地区的服务器

作用：把静态资源文件/第三方库放在CDN网络中各个服务器中，供用户就近请求获取

好处：减轻自己服务器请求压力，就近请求物理延迟低，配套缓存策略

实测#

需求：开发模式使用 本地 第三方库，生产模式下使用 CDN加载 引入

步骤：

  1. 在html中引入第三方库的 CDN地址 并用模板语法判断
  2. 配置webpack.config.js中 externals 外部扩展选项（防止某些import的包被打包）
  3. 两种模式下打包观察效果

在public/index.html中引入所需第三方库并用模板语法判断

<head>
    <!-- ... -->
    <% if(htmlwebpackplugin.options.usecdn){ %>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" />
    <% } %>
</head>
<body>
    <% if(htmlWebpackPlugin.options.useCdn){ %>
    <script> src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.min.js"></script>
    <script> src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.min.js"></script>
    <% } %>
</body>

webpack.config.js配置externals外部扩展选项

const config={
    // ...
    plugins: [
        new HtmlWebpackPlugin({
            // ...
            useCdn: process.env.NODE_ENV === 'production', // 生产模式下使用cdn引入的地址
        }),
    ]
}
// 生产环境下使用相关的配置
if (process.env.NODE_ENV === 'production') {
    // 外部扩展（让webpack防止import的包被打包进来）
    config.externals = {
        // key:import from 语句后面的字符串
        // value:留在原地的全局变量（最好和cdn在全局暴露的变量一致）
        'bootstrap/dist/css/bootstrap.min.css': 'bootstrap',
        axios: 'axios',
    };
}

打包观察效果

开发环境下：

生产环境下：

满足要求，开发模式使用本地下载第三方库，生产模式使用第三方库CDN