19_webpack_externals

2022-05-08 20:00:49 阅读：170 来源： 互联网

标签：index dayjs 19 cdn externals webpack html build CDN

假如我们购买了CDN服务器为我们的网站的访问速度进行优化，那么我们，该如何配置

假如我的CDN为：https://mr-hou88888/cdn/那么publicPath该如何配置

1.配置publicpath

  output: {
    path: resolveApp("./build"),
    filename: "[name].[contenthash:6].bundle.js",
    chunkFilename: "[name].[contenthash:6].chunk.js",
    publicPath: "https://mr-hou88888/cdn/",
  },

第三方库的CDN

通常比较出名的开源框架，都会把源码放到一些比较出名的、免费的CDN服务器上

　　国际上：unpkg、JSDelivr、cdnjs

　　国内：bootcdn

如：我们的dayjs和lodash我们并没有直接引用他们的cdn，而是直接一起打包build文件夹中去，然后全部部署到自己的服务器中，相当于使用到的第三方的代码，放到了自己的服务器中去

我们可以找到这些第三方库，配置一个属性extemals忽略哪些库是不进行打包的，然后给index.html配置两个cdn的地址(lodash，dayjs)

 externals: {
    // 库中暴露出来的全局对象
    lodash: "_",
    dayjs: "dayjs",
  },

当你这么设置完成之后，执行npm run build你就会发现build文件夹下没有vender这个文件了

我们的代码现在是不能正常运行的

我们需要在index.html中自己配置上cdn

但是，在我们开发环境下就没有必要去设置cdn加速了，加载的速度还没有在我们自己主机上快呢

所以我们把externals的配置放到production中
然后在我们的index.html模板中，那两个script标签，我们怎么让他区分生产环境，让他只有在生产环境的时候才去加上那两个script代码

我们可以使用模板引擎的ejs语法，因为index.html是一个ejs模板，ejs模板在解析的时候，是会使用node环境的

  <!-- Definel -->
  <!-- ejs中的if判断 -->
  <% if(process.env.NODE_ENV==='production'){ %>
  <script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
  <%}%>

标签：index,dayjs,19,cdn,externals,webpack,html,build,CDN
来源： https://www.cnblogs.com/Mr-Hou88888/p/16246622.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

19_webpack_externals

第三方库的CDN