15 —— Webpack中的优化——前端项目使用CDN技术

一般来说我们会在开发模式下使用本地第三方库;生产模式下使用CDN加载引入

这样在生产模式下无任何第三方库的源码,项目体积就会缩小的多一些内容

使用步骤:

  • 在html文件中引入第三方库的CDN地址;
  • 用模板引擎语法判断

<% if(htmlWebpackPlugin.options.useCdn){ %>

<% } %>

<%空格...空格%>

  • 配置webpack.config.js中externals外部扩展选项

webpack的externals属性用于排除不需要打包的库;

设置externals,可以确保项目正确引用外部资源而不打包

相关推荐
swipe1 小时前
把 JavaScript 原型讲透:从 `[[Prototype]]`、`prototype` 到 `constructor` 的完整心智模型
前端·javascript·面试
问道飞鱼1 小时前
【前端知识】React 组件生命周期:从底层原理到实践场景
前端·react.js·前端框架·生命周期
CHU7290351 小时前
定制专属美丽时刻:美容预约商城小程序的贴心设计
前端·小程序
浩~~2 小时前
反射型XSS注入
前端·xss
AwesomeDevin2 小时前
AI时代,我们的任务不应沉溺于与 AI 聊天,🤔 从“对话式编程”迈向“数字软件工厂”
前端·后端·架构
harrain2 小时前
antvG2折线图和区间range标记同时绘制
前端·javascript·vue.js·antv·g2
德育处主任Pro2 小时前
从重复搭建到高效生产,RollCode的H5开发新范式
前端
蜡台3 小时前
SPA(Single Page Application) Web 应用(即单页应用)架构模式 更新
前端·架构·vue·react·spa·spa更新
网络点点滴4 小时前
组件通信-作用域插槽
前端·javascript·vue.js
kyriewen115 小时前
异步编程:从“回调地狱”到“async/await”的救赎之路
开发语言·前端·javascript·chrome·typescript·ecmascript·html5