js给静态文件添加cdn,js 动态加载js

本文目录一览：

• 1、create-react-app脚手架项目打包CDN部署
• 2、如何将大量的HTML中的js和css整体的切换到cdn的服务器上去
• 3、把web静态资源放在cdn上怎么弄
• 4、如何将静态资源缓存在cdn节点上
• 5、webpack使用HtmlWebpackPlugin进行cdn配置

create-react-app脚手架项目打包CDN部署

因为react项目多为SPA项目，用于生产部署时，存在首屏响应过慢导致用户难以忍受等待时间从而流失问题。一般导致首页响应过慢的原因有很多，网络问题是其中之一。本文记录通过七牛云免费CDN部署react项目。

1.create-react-app创建react项目,并启动项目。

2.项目打包。

此时如果只是普通部署，不要求体验效果时，把build文件下的文件拷贝到静态服务器即可。

接下来考虑如何静态文件CDN部署。

3.修改webpack文件，打包文件的引用路径省车过为CDN路径。

     1. config文件夹下paths.js（修改pathname为cnd的域名）

    2. config文件夹下webpack.config.js 修改output文件名，使用绝对路径。

修改后重新打包，发现index.html中引入css,js的路径皆改成cdn路径。

附加: 上传打包文件至七牛云CDN。（upload.js）

如何将大量的HTML中的js和css整体的切换到cdn的服务器上去

方法一：修改html里面js, css引用链接，指向cdn服务器（这些都有规律，直接替换应该可行）

方法二：在服务器做rewrite，将*.js, *.css的访问301到cdn

方法三：将所有的css, js引用改为xx.php，在xx.php里面集中处理这些请求，替换链接。

建议使用第一种。

把web静态资源放在cdn上怎么弄

1. max-age = x (单位秒) 缓存新鲜期.对所有代理有效,包括用户代理(也就是我们的浏览器)

2. s-maxage = x (单位秒) 缓存的新鲜期,仅对缓存代理有效(不包括我们的浏览器)

3. no-cache 请求头中出现这个是告知缓存代理不要拿你的缓存副本来骗我,请你回源. 说白了就是,我的期望是,服务器端直接返回给我一个最新鲜的版本.(对应名词:端对端重载)

如何将静态资源缓存在cdn节点上

首先要纠正这个问题，动态内容是没办法缓存的。

动态内容需要的是信息的实时交互，如果采用了缓存，会影响正常业务。

举个例子，国航官网，订票内容就是动态的，如果这时候将这部分进行缓存，那当用户订票的时候，官网显示剩余10张票，并且在缓存过期内，会一直显示10张票。而实际数据库里已经没有票了。这时候势必会影响到客户体验。

动态内容的CDN加速其实还是链路和协议的优化。

首先，国内ISP复杂，南北互通的问题，会导致访问速度慢，CDN厂商有覆盖全国的PBL网络（可以理解为CDN提供商自己的私有网络，独立的ISP），当采用动态加速时，将内容引入CDN供应商的网络内，再根据分布在全国的CDN节点作为接入和落地口，达到链路的最优。

其次，CDN供应商会针对TCP等协议进行优化和调整，使正常的TCP三次握手减少到1次，从而减少计算机与计算机、路由之间的信息传递环节，从而达到加速目的。

webpack使用HtmlWebpackPlugin进行cdn配置

在前面的 文章 中我们介绍了cdn的实现原理，现在我们来实现如何在正式开发中使用cdn功能。要使用cdn功能，就需要cdn服务商，我们可以自己搭建，也可以使用一些比较知名的服务商，庆幸的是市面上有不少的免费cdn服务商，如：

其中BootCDN 是 Bootstrap 中文网 支持并维护的前端开源项目免费 CDN 服务，项目资源同步于 cdnjs 仓库。界面相对比较好看，且支持搜索功能，可以在线测试cdn是否正常，所以下面以 Bootcdn 为例说明。

在前段项目开发中，我们经常使用webpack进行项目搭建， 主要作用有两个，分别是

在webpack中使用cdn是在打包生成静态资源的时候做处理，主要原理是使用 html-webpack-plugin 动态插入cdn链接。

关于webpack的使用这里不做过多的介绍，将以vue–cli 2.x生成的默认项目为例做介绍

html-webpack-plugin 是webpack的一个插件，可以动态的创建和编辑html内容，在html中使用 esj语法 可以读取到配置中的参数，简化了html文件的构建。

我们这次主要是使用它来动态插入cdn链接，如link标签和script标签。

在线项目地址

vue-cli 2.x

创建名为 webpack-cdn-demo ，类型为webpack的 vue 项目，如果安装的vue-cli是3.x版本，命令不太一样，详细可看 vue-cli 3 。

安装依赖

启动项目

下面简单介绍一下目录结构

其中build文件夹中的 webpack.prod.conf.js 是我们主要注意的文件,我们在该文件中动态设置不需要被打包的模块并构建出合适的链接。

在webpack项目中，所引入的第三方资源会被统一打包进vender文件中，我们通过webpack的 externals 属性可以设置打包时排除该模块，详情说明见 外部扩展(externals) 。

在前面的步骤中，我们创建的项目包括vue、vue-router，在正式开发在还会有ui库，如element-ui，为了方便演示，我们再安装element-ui和axios两个模块，并实现在构建是把这是个模块以cdn的形式引入。

注意安装时记得 -S ，它的作用是安装完后在 package.json 项目文件中插入记录，后续操作需要读取已安装模块

对于cdn，我们可以自己搭建，也可以使用专业的cdn服务商，这里使用免费的cdn bootcdn 。选用免费cdn有很多好处，但毕竟有隐患，那就是服务有可能会奔溃。

依次搜索出前面模块，结果如下

按照规律，得出cdn资源路径规则为

其他cdn服务商同理

使用cdn其实也就是在webpack热启动和打包项目的时候动态插入script和style链接 ，为了方便维护，我们通过在 build/utils.js 文件上添加几个方法，将来在 webpack.dev.conf.js 和 webpack.prod.conf.js 上可以使用。

如果没有build/utils.js，可以在其他文件上添加，只要在后续步骤中能操作到就行

name 模块名称，与package.json同名

scope 模块作用域命名

js js地址

css css地址

这里特别注意scope，它是webpack配置的external参数下的信息，比如vue的作用域命名是Vue，vue-router的作用域命名是VueRouter，element-ui的作用域命名是ELEMENT，同理，jq的作用域命名是JQuery， 具体做法是先引入该资源，然后在控制台依次输入近似的值，一个个匹配 (目前没找到更好的做法)。

在webpack热启动本地调试的时候，我们可以使用cdn。

在 build/webpack.dev.conf.js 中，默认已经引入了 utils.js ，所以可以直接调用相关方法，如果是自定义的文件，记得引入。

我们可以往里面添加点自定义属性，方便在index.html中调用。 ，修改如下：

其中 cdnConfig 和 onlyCss 自定义属性，在html上通过 htmlWebpackPlugin.options 可以读取到。

更多html-webpack-plugin配置情况官网，这里暂时不需要更多。

在打包的时候，我们使用cdn，配置和前面dev的差不多，只不过需要做多一步。

注意此处的 externalModules ，后面用到，也就是比dev多的步骤。

加入和dev一样的两个配置，不过需要把onlyCss改为 true ，因为我们希望打包时不单单使用css。

webpack配置已经完成，在html-webpack-plugin中已经添加了相关参数，我们再在页面上可以直接使用，使用语法是 ejs ，和asp.net，jsp，php类似。

通过 % % 和 htmlWebpackPlugin.options 用js遍历 插入 link标签和script标签。

ps: 修改了webpack配置，需要重启项目才会生效

打包项目

可以看到打包体积大大减小了

页面上也正确引入了cdn资源。

最后奉上git地址：

比悲伤更悲伤的分割线

原来两年前已经有人做了一个类型的webpack-cdn-plugin