假如我们购买了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. MySQL中的函数使用

    有三张表,学生表(t_student),班级表(t_class),成绩表(t_grade),三张表的字段设计如下                                        查询大竹 ...

  2. ECharts 饼图指定颜色显示

    一.通过setOption的color属性分配颜色范围 先介绍这里提到的color属性 color:调色盘颜色列表.如果系列没有设置颜色,则会依次循环从该列表中取颜色作为系列颜色. 默认为: ['#5 ...

  3. STM32F1库函数初始化系列:定时器中断

    1 static void TIM3_Configuration(void) //10ms 2 { 3 TIM_TimeBaseInitTypeDef TIM_TimeBaseStructure; 4 ...

  4. 学习java Day1

    今天正式开始自学Java,首先在官网安装了最新版的jdk并配置好了环境,随后安装好了eclipse. 使用eclipse运行了一个基础的aa.java文件,并成功打印出hello world 首先我了 ...

  5. 题解 P4448

    如果这不是一道原题,这道题出的还不错,是个比较毒瘤的数数.由于我太菜了反正我自己没有做出来后面的 dp,zyf 巨佬教的. 不过听说合肥六中某巨佬当年也没做出来,平衡了雾 但问题是这道题是原题,我安徽 ...

  6. WPF ScrollViewer 没有效果

    ScrollViewer组件外组件如果是StackPanel组件 需要给StackPanel 设置高度,ScrollViewer 才会有滚动条 如果不想设置StackPanel高度,可以把StackP ...

  7. 基于Linux编译JDK18

    1.概述 JDK都没手动编译过,敢说自己是Java程序员吗?(By 羊哥--JDK都没手动编译过,敢说自己是Java程序员吗?实战编译Java源码(JDK源码,JVM)视频教程_哔哩哔哩_bilibi ...

  8. channel 死锁

    死锁: - 单个协程永久阻塞 - 两个或两个以上的协程执行过程中,由于竞争资源或由于彼此通信而造成的一种阻塞的现象. channel 死锁场景: - 非缓存channel只写不读 - 非缓存chann ...

  9. tdlib成功编译版本20230205(java)

    tdjni是java本地调用接口dll文件夹下的三个动态链接是供tdjni调用的使用时这三个加到系统环境变量里 编译文件在本人的文件里,可以下载

  10. Deer_GF之【AssetsHotfix】和【AssetsNative】文件夹的区别

    Hi,今天介绍一下Deer_Gf里的[AssetsHotfix]和[AssetsNative]文件夹的区别:       框架介绍请移步[Deer_GF之框架介绍] 一.[AssetsHotfix] ...