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

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

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

使用步骤:

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

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

<% } %>

<%空格...空格%>

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

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

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

相关推荐
悲且狂22 分钟前
vue辅助工具(vue系列二)
前端·javascript·vue.js
牧码岛1 小时前
Web前端之Vue+Element实现表格动态不同列合并多行、localeCompare、forEach、table、push、sort、Map
前端·javascript·elementui·vue·web·web前端
老K(郭云开)1 小时前
如何让eDrawings html文件在Chrome浏览器上展示——allWebPlugin中间件扩展
前端·javascript·chrome·中间件·edge·html
DCTANT1 小时前
【原创】vue-element-admin-plus完成确认密码功能,并实时获取Form中表单字段中的值
前端·javascript·vue.js·elementui·typescript
汪子熙1 小时前
使用 Trae 开发一个演示勾股定理的动画演示
前端·人工智能·trae
GISer_Jing2 小时前
字符串操作&栈和队列
前端·javascript
黑土豆2 小时前
TypeScript技术系列13:深入理解配置文件tsconfig.json
前端·javascript·typescript
zheshiyangyang2 小时前
JavaScript---原型和原型链
开发语言·前端·javascript
momo_养身版2 小时前
Browser use — 利用 AI 操作浏览器 · 原理篇
前端·openai
悲且狂2 小时前
Vue环境搭建:vue+idea
前端·vue.js·intellij-idea