19_webpack_externals
假如我们购买了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的更多相关文章
随机推荐
- MySQL中的函数使用
有三张表,学生表(t_student),班级表(t_class),成绩表(t_grade),三张表的字段设计如下 查询大竹 ...
- ECharts 饼图指定颜色显示
一.通过setOption的color属性分配颜色范围 先介绍这里提到的color属性 color:调色盘颜色列表.如果系列没有设置颜色,则会依次循环从该列表中取颜色作为系列颜色. 默认为: ['#5 ...
- STM32F1库函数初始化系列:定时器中断
1 static void TIM3_Configuration(void) //10ms 2 { 3 TIM_TimeBaseInitTypeDef TIM_TimeBaseStructure; 4 ...
- 学习java Day1
今天正式开始自学Java,首先在官网安装了最新版的jdk并配置好了环境,随后安装好了eclipse. 使用eclipse运行了一个基础的aa.java文件,并成功打印出hello world 首先我了 ...
- 题解 P4448
如果这不是一道原题,这道题出的还不错,是个比较毒瘤的数数.由于我太菜了反正我自己没有做出来后面的 dp,zyf 巨佬教的. 不过听说合肥六中某巨佬当年也没做出来,平衡了雾 但问题是这道题是原题,我安徽 ...
- WPF ScrollViewer 没有效果
ScrollViewer组件外组件如果是StackPanel组件 需要给StackPanel 设置高度,ScrollViewer 才会有滚动条 如果不想设置StackPanel高度,可以把StackP ...
- 基于Linux编译JDK18
1.概述 JDK都没手动编译过,敢说自己是Java程序员吗?(By 羊哥--JDK都没手动编译过,敢说自己是Java程序员吗?实战编译Java源码(JDK源码,JVM)视频教程_哔哩哔哩_bilibi ...
- channel 死锁
死锁: - 单个协程永久阻塞 - 两个或两个以上的协程执行过程中,由于竞争资源或由于彼此通信而造成的一种阻塞的现象. channel 死锁场景: - 非缓存channel只写不读 - 非缓存chann ...
- tdlib成功编译版本20230205(java)
tdjni是java本地调用接口dll文件夹下的三个动态链接是供tdjni调用的使用时这三个加到系统环境变量里 编译文件在本人的文件里,可以下载
- Deer_GF之【AssetsHotfix】和【AssetsNative】文件夹的区别
Hi,今天介绍一下Deer_Gf里的[AssetsHotfix]和[AssetsNative]文件夹的区别: 框架介绍请移步[Deer_GF之框架介绍] 一.[AssetsHotfix] ...