cdn 引入的资源需要通过 externals 排除打包哦~

一颗冰淇淋

cdn 指的是通过相互连接的网络系统,使用最靠近用户的服务器将音乐、图片等资源以高效率和低成本的方式将内容传递给用户。

在 webpack 中,我们可能会将引入的第三方资源会编译成单独的文件,作为静态资源放到服务器上,但有些库它本身就有 cdn 链接,通过 cdn 直接加载会使各地资源获取速度更快。

编译成单独文件

src/index.js 文件中写一段简单代码,通过 axios 发送 get 请求

import axios from 'axios';
axios.get('https://httpbin.org/get').then((res) => {
  console.log('res', res);
});

webpack.config.js 中定义 splitChunks 属性,将公共资源单独编译

module.exports = {
  // 其余配置省略
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

执行 npm run build 后,axios 被编译到 559.js 文件中。

559 这个文件名是通过 optimization.chunkIds 定义的,默认属性 deterministic,即根据内容生成的一个不变的短数字

再将编译后的 html 文件在浏览器中打开,获取到了 get 请求的响应数据

引入cdn链接

在这种情况下, 我们是将第三方资源编译成单独的文件,如果通过 cdn 引入的方式呢?

首先在官网上找到 axioscdn 地址。

然后在 public 文件夹的 html 模板文件里引入 cdn 链接。

<body>  
   <!--   其余配置省略 -->
   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</body>

再通过 html-webpack-plugin 编译的时候复制一份到打包后的 dist 文件夹中。

module.exports = {
  // 其余配置省略
  plugins: [
    new HtmlWebpackPlugin({
      title: 'hello webpack',
      template: './public/index.html',
    }),
  ],
};

html-webpack-plugin 不熟悉的可以参考这篇文章

再通过 npm run build 发现,还是将 axios 编译成了单独的文件,并且 index.html 中也引入了 cdn 的链接。

这是因为,我们只告诉了 webpack 要将 cdn 引入 html 页面中,没有告诉它不需要再帮我们打包 axios 的第三方资源。

不打包第三方资源

那通过什么告诉 webpack 不需要打包第三方资源了呢,答案是 externals 属性

module.exports = {
  // 其余配置省略
  externals: {
    axios: 'axios',
  },
};

因为只用到了 axios 这一个库,所以剔除打包后,之前生成包含 axios 的 559.js 文件就不会生成,也不会被引入到 html 页面中,axios也能够正常使用。

区分开发和生产模式

当我们通过 devServerHMR 进行本地开发时,不会在项目里生成文件,而是存储于内存当中,这个时候通过内存获取数据会比从网络中获取 cdn 资源更快。

所以此时可以对引入的 cdn 链接做区分,当生产环境下使用 cdn 链接,本地就通过 node_modules 中的资源编译就好。

只需要在 public 下模板 html 文件引入 cdn 链接的时候做以下判断。

<% if (process.env.NODE_ENV === 'production') { %>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<% } %>

能在 html 页面获取到 NODE_ENV 属性是因为在 webpack.config.js 中我们将 mode 定义为 "production" 后,webpack 会有一些默认操作,其中之一就是使用 DefinePlugin 将 process.env.NODE_ENV 的值设置为 production。

DefinePlugin 不熟悉的可以参考这篇文章

所以此时通过 npm run serve 进行本地开发时,不会加载 cdn 资源。

总结

使用 cdn 链接分为以下几个步骤

  • 去官网 / cdn 网站上找到需要使用库的 cdn 地址
  • 通过 externals 属性排除掉通过 cdn 引入链接的库,不让它再打包
  • 在模板 html 文件中引入 cdn 地址,可通过区分开发和生产环境来判断是否使用 cdn 链接(process.env.NODE_ENV 属性)
  • 使用 html-webpack-plugin 复制模板 html 文件到打包后的 dist 文件中

以上就是 webpack 中 cdn 资源与 externals 属性, 更多有关 webpack 的内容可以参考我其它的博文,持续更新中~

阅读 399

hello

101 声望
4 粉丝
0 条评论

hello

101 声望
4 粉丝
宣传栏