假如我们购买了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: {
// 库中暴露出来的全局对象
  //key:代表忽略的框架的名称(忽略从webpack 导入的库的名称(import "lodash") 不会再对其进行打包)
   //value:从CDN地址请求下来的js中提供对应的名称
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>
<%}%>

19_webpack_externals的更多相关文章

随机推荐

  1. 计算机网络基础05-Web应用

    1 Web最重要的构成基础 网页 网页互相连接 1.1 网页 网页包含多个对象 对象:HTML文件.图片文件.视频文件.动态脚本等 基本HTML文件:包含对其它对象引用的连接 1.2 对象的寻址 UR ...

  2. Google Guice 用户指南 - Ⅰ:概览

    译者:kefate 原文:https://github.com/google/guice/wiki/Overview 大家好,我是kefate.今天开始我将会把Google Guice的官方文档陆续翻 ...

  3. .Net Core后端架构实战【1-项目分层框架设计】

    摘要:基于.NET Core 7.0WebApi后端架构实战[1-项目结构分层设计]  2023/02/05, ASP.NET Core 7.0, VS2022 引言 从实习到现在回想自己已经入行四年 ...

  4. Elemen ui&表单 、CRUD、安装

    ElementUI表单 Form表单,每一个表单域是由一个form-item组件构成的,表单域中可以放置各种类型的表单控键,有input.switch.checkbox 表单的绑定form 内容分别是 ...

  5. BUUCTF-[SUCTF2019]EasySQL

    [SUCTF2019]EasySQL 这个连闭合都测试不出来,就有点无从下手了. 额,随手输了一个1;show tables;出来了表名.一通操作之后,点开了别人的wp,学习了一波. 然后知道了题目中 ...

  6. 把MyBatis当项目一样,讲透源码的技术书籍!

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 为啥?因为这些年,就很少有人能自主意识到,如何提升编码质量! 但讲屁话没有用,想学好编程突破阶 ...

  7. Postgresql执行计划浅析与案例

    一.前言 PostgreSQL为每个收到查询产生一个查询计划. 选择正确的计划来匹配查询结构和数据的属性对于好的性能来说绝对是最关键的,因此系统包含了一个复杂的规划器来尝试选择好的计划. 你可以使用E ...

  8. ABP微服务系列学习-搭建自己的微服务结构(四)

    上篇我们实现了认证服务和网关服务,基本我们的基础服务已经完成了,接下来我们才需要做服务的数据迁移.这里我们需要使用EF的CodeFirst模式.通过DotnetCli的命令去操作: dotnet ef ...

  9. LeetCode-911 在线选举

    来源:力扣(LeetCode)链接:https://leetcode-cn.com/problems/online-election 题目描述 给你两个整数数组 persons 和 times .在选 ...

  10. LeetCode-1706 球会落在何处

    来源:力扣(LeetCode)链接:https://leetcode-cn.com/problems/where-will-the-ball-fall 题目描述 用一个大小为 m x n 的二维网格 ...