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

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

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

使用步骤:

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

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

<% } %>

<%空格...空格%>

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

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

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

相关推荐
狗头大军之江苏分军4 分钟前
Node.js 原生功能越来越强,我们是不是被 npm 玩坏了?
前端·javascript·架构
独自破碎E8 分钟前
TS7016: Could not find a declaration file for module ‘vue-router‘.解决办法
前端·javascript·vue.js
仰望星空@脚踏实地16 分钟前
DataKit js-yaml和follow-redirects组件依赖影响分析
前端·datakit
Mr_fang7194036 分钟前
iframe 导致 Vue Router go(-1) 无法正常返回问题解决方案
前端
Drift_Dream38 分钟前
Node.js 第二课:用核心模块构建你的第一个服务器
前端·后端
DEMO派43 分钟前
首页图片懒加载实现方案解析
前端
用户952081611791 小时前
百度地图MapVThree Editor:地图编辑
前端
程序员龙语1 小时前
CSS 文本样式与阴影属性
前端·css
LYFlied1 小时前
【每日算法】LeetCode 152. 乘积最大子数组(动态规划)
前端·算法·leetcode·动态规划
狼与自由1 小时前
excel 导入 科学计数法问题处理
java·前端·excel