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

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

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

使用步骤:

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

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

<% } %>

<%空格...空格%>

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

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

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

相关推荐
粉末的沉淀10 分钟前
css:倒影倾斜效果
前端·css
zandy10111 小时前
如何快速入门-衡石科技分析平台
服务器·前端·科技·数据库管理员
邝邝邝邝丹1 小时前
React学习———React Router
前端·学习·react.js
Yvonne爱编码2 小时前
CSS- 2.1 实战之图文混排、表格、表单
前端·css·html·github·状态模式·html5·hbuilder
前端小巷子2 小时前
CSS面试题汇总
前端·css·面试
绝美焦栖2 小时前
vue复杂数据类型多层嵌套的监听
前端·javascript·vue.js
xixixin_3 小时前
【Vite】前端开发服务器的配置
服务器·前端·网络
.生产的驴3 小时前
Vue3 加快页面加载速度 使用CDN外部库的加载 提升页面打开速度 服务器分发
运维·服务器·前端·vue.js·分布式·前端框架·vue
史迪仔01123 小时前
Python生成器:高效处理大数据的秘密武器
前端·数据库·python
蓝婷儿4 小时前
前端面试每日三题 - Day 34
前端·面试·职场和发展