19_webpack_externals

假如我们购买了cdn服务器为我们的网站的访问速度进行优化,那么我们,该如何配置

假如我的CDN为:https://mr-hou88888/cdn/那么publicPath该如何配置

1.配置publicpath

 output: { path: resolveApp("./build"), filename: "[name].[contenthash:6].bundle.js", chunkFilename: "[name].[contenthash:6].chunk.js", publicPath: "https://mr-hou88888/cdn/", },

 

第三方库的CDN

通常比较出名的开源框架,都会把源码放到一些比较出名的、免费的CDN服务器上

国际上:unpkg、JSDelivr、cdnjs

国内:bootcdn

如:我们的dayjs和lodash我们并没有直接引用他们的cdn,而是直接一起打包build文件夹中去,然后全部部署到自己的服务器中,相当于使用到的第三方的代码,放到了自己的服务器中去

我们可以找到这些第三方库,配置一个属性extemals忽略哪些库是不进行打包的,然后给index.html配置两个cdn的地址(lodash,dayjs)

 externals: { // 库中暴露出来的全局对象 lodash: "_", dayjs: "dayjs", },

当你这么设置完成之后,执行npm run build你就会发现build文件夹下没有vender这个文件了

我们的代码现在是不能正常运行的

我们需要在index.html中自己配置上cdn

 19_webpack_externals

 

 

 但是,在我们开发环境下就没有必要去设置CDN加速了,加载的速度还没有在我们自己主机上快呢

 

所以我们把externals的配置放到production中
然后在我们的index.html模板中,那两个script标签,我们怎么让他区分生产环境,让他只有在生产环境的时候才去加上那两个script代码

我们可以使用模板引擎的ejs语法,因为index.html是一个ejs模板,ejs模板在解析的时候,是会使用node环境的

 <!-- Definel --> <!-- ejs中的if判断 --> <% if(process.env.NODE_ENV==='production'){ %> <script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script> <%}%>

 

原文链接:https://www.cnblogs.com/Mr-Hou88888/p/16246622.html

原创文章,作者:优速盾-小U,如若转载,请注明出处:https://www.cdnb.net/bbs/archives/7009

(0)
上一篇 2022年10月5日 16:29
下一篇 2022年10月5日 17:48

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

优速盾注册领取大礼包www.cdnb.net
/sitemap.xml