关于前端:cdn-引入的资源需要通过-externals-排除打包哦

4次阅读

共计 1982 个字符，预计需要花费 5 分钟才能阅读完成。

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 引入的形式呢？

首先在官网上找到 axios 的 cdn 地址。

而后在 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 也可能失常应用。

当咱们通过 devServer 和 HMR 进行本地开发时，不会在我的项目里生成文件，而是存储于内存当中，这个时候通过内存获取数据会比从网络中获取 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 链接分为以下几个步骤