Webpack 与 CDN，如何利用 import 引入外部资源-「好主机」

首页 / 高防服务器 / 正文

Webpack 与 CDN，如何利用 import 引入外部资源

Time：2024年11月05日 Read：10 评论：42 作者：y21dr45

在现代前端开发中，Webpack 作为一款强大的模块打包工具，极大地优化了项目的构建和运行，通过合理使用 CDN（内容分发网络）来引入外部资源，可以进一步提高应用的性能和用户体验，本文将详细介绍如何在 Webpack 项目中使用 CDN 引入资源，并探讨其优势和实现方法。

Webpack 与 CDN，如何利用 import 引入外部资源

背景与动机

随着前端项目的日益复杂，依赖的第三方库也越来越多，如果将所有依赖都打包到应用中，会导致最终的 bundle 文件过大，从而影响页面加载速度和性能，CDN 提供了一种有效的解决方案，通过在外部服务器上缓存静态资源，使用户可以从最近的节点快速获取这些资源。

CDN 的选择与配置

选择一个可靠的 CDN 服务商是关键，常见的免费 CDN 有 BootCDN、Unpkg 等，以 BootCDN 为例，它不仅提供了丰富的前端库资源，还支持搜索功能和在线测试，非常方便使用。

1. 确定 CDN 资源 URI

假设我们需要引入 Vue.js、Vue Router 和 Axios，首先需要在 BootCDN 中找到对应的资源链接：

- Vue.js:https://cdn.bootcdn.net/ajax/libs/vue/2.5.2/vue.min.js

- Vue Router:https://cdn.bootcdn.net/ajax/libs/vue-router/3.0.1/vue-router.min.js

- Axios:https://cdn.bootcdn.net/ajax/libs/axios/0.18.0/axios.min.js

2. 配置 externals

在 Webpack 中，我们可以使用 externals 属性来排除某些模块，使其不被打包进最终的 bundle 文件中，而是通过 CDN 引入。

const path = require('path');
const webpack = require('webpack');
const createThemeColorReplacerPlugin = require('./config/plugin.config');
function resolve (dir) {
    return path.join(__dirname, dir);
}
module.exports = {
    externals: {
        'vue': 'Vue',
        'vue-router': 'VueRouter',
        'axios': 'axios'
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './public/index.html',
            inject: true
        }),
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')
            }
        }),
        new MiniCssExtractPlugin({
            filename: utils.assetsPath('css/[name].[contenthash].css')
        }),
        new OptimizeCSSAssetsPlugin({
            cssProcessorOptions: {
                map: {
                    inline: false,
                    annotation: true
                }
            }
        }),
        new TerserPlugin(),
        new CleanWebpackPlugin(),
        new createThemeColorReplacerPlugin()
    ]
};

动态插入 CDN 链接

为了在生产环境中使用 CDN，同时在开发环境中使用本地资源，我们可以通过模板语法在 HTML 文件中动态插入 CDN 链接。

1. 修改 index.html 模板

在src/public/index.html 中，使用 Webpack 的插件功能动态插入 script 和 link 标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
    <noscript>
        <strong>本页需要JavaScript才能正常显示，请启用JavaScript并刷新页面。</strong>
    </noscript>
    <div id="app"></div>
    <!-- 正常的引入 CDN 资源 -->
    <% if (htmlWebpackPlugin.options.cdn) { %>
        <script src="<%= htmlWebpackPlugin.options.cdn %>/ajax/libs/vue/2.5.2/vue.min.js"></script>
        <script src="<%= htmlWebpackPlugin.options.cdn %>/ajax/libs/vue-router/3.0.1/vue-router.min.js"></script>
        <script src="<%= htmlWebpackPlugin.options.cdn %>/ajax/libs/axios/0.18.0/axios.min.js"></script>
    <% } %>
</body>
</html>

2. 配置环境变量

在.env 文件中定义不同环境下的 CDN 地址：

.env文件
CDN_BASE_URL=https://cdn.bootcdn.net
NODE_ENV=production

在开发环境中，可以不设置CDN_BASE_URL，或者设置为null：

.env.development文件
CDN_BASE_URL=
NODE_ENV=development

优化与扩展

1. 使用 DllPlugin 进行分包

对于大型项目，可以使用 Webpack 的DllPlugin 进行分包，将第三方库单独打包，减少主包的体积。

new webpack.DllPlugin({
    path: path.join(__dirname, 'dist', 'manifest.json'),
    name: 'vendors',
    context: __dirname
})

2. Prefetch 和 Preload

利用浏览器的空闲时间预取资源，进一步提升性能：

<link rel="preload" href="<%= htmlWebpackPlugin.options.cdn %>/path/to/resource" as="script">
<link rel="prefetch" href="<%= htmlWebpackPlugin.options.cdn %>/path/to/another-resource" as="script">

通过合理使用 CDN 和 Webpack 的 externals 功能，我们可以显著优化前端项目的性能，选择合适的 CDN 服务商，配置好 externals 和动态插入 CDN 链接，可以实现资源的高效加载和管理，结合 Webpack 的其他优化策略，如 DllPlugin、Prefetch 和 Preload，可以进一步提升用户体验和应用性能。

原文链接：https://www.asoulu.com/post/84195.html

上一篇：VPS、Cloudflare与CDN，构建高效网站的黄金组合

下一篇：vue引入cdn 的js

标签： webpack import cdn

背景与动机

CDN 的选择与配置

动态插入 CDN 链接

优化与扩展

1. 引言