19_webpack_externals
2024-09-08 19:00:48
假如我们购买了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>
<%}%>
最新文章
- K-Means聚类和EM算法复习总结
- lustre文件系统部署流程
- 用div,ul,input模拟select下拉框
- shell grep 高亮
- WinForm的延时加载控件概述
- spring quartz 定时任务“Failed to load class ";org.slf4j.impl.StaticLoggerBinder”“Checking for available updated version of Quartz”
- dubbo使用方法
- matlab中s函数编写心得(转)
- (0)写给Web初学者的教案-----Web基础
- python_21_线程+进程+协程
- (原创)看我用各种姿势在手机和PC查看到连接到的wifi密码
- Python中创建对象的方法
- 【开发技术】Java生成验证码
- Service Worker
- SVM原理 (转载)
- TypeError: format string
- less(css)语言快速入门
- ARM的体系结构与编程系列博客——ARM体系变种
- nginx 配置 单页面应用的解决方案
- Spring Boot框架搭建