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

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

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

使用步骤:

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

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

<% } %>

<%空格...空格%>

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

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

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

相关推荐
ohMyGod_1232 分钟前
React16,17,18,19新特性更新对比
前端·javascript·react.js
前端小趴菜054 分钟前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js
@大迁世界4 分钟前
第1章 React组件开发基础
前端·javascript·react.js·前端框架·ecmascript
Hilaku7 分钟前
从一个实战项目,看懂 `new DataTransfer()` 的三大妙用
前端·javascript·jquery
爱分享的程序员11 分钟前
前端面试专栏-算法篇:20. 贪心算法与动态规划入门
前端·javascript·node.js
我想说一句12 分钟前
事件委托与合成事件:前端性能优化的"偷懒"艺术
前端·javascript
爱泡脚的鸡腿14 分钟前
Web第二次笔记
前端·javascript
良辰未晚14 分钟前
Canvas 绘制模糊?那是你没搞懂 DPR!
前端·canvas
Dream耀18 分钟前
React合成事件揭秘:高效事件处理的幕后机制
前端·javascript
P7Dreamer19 分钟前
Vue 3 + Element Plus 实现可定制的动态表格列配置组件
前端·vue.js