利用CDN加速react webpack打包后的文件详解


Posted in Javascript onFebruary 22, 2018

此文不介绍webpack基本配置,如果对基本配置有疑问请查阅官方文档。

1、配置webpack.config.js

将output.publicPath改成上传到的cdn地址, 例(对应上面上传配置):

publicPath: "https://your_base_cdn_url" + process.env.NODE_ENV + "/cdn/"

打包

NODE_ENV=production node_modules/webpack/bin/webpack.js -p

这样打包后的文件例如有

index.html
12345678.src.js
12345678.src.css
...

此时,打包后生成的index.html文件中已经引入了cdn文件。

<html lang="en">
<head>
 <title>title</title>
 <link href="https://your_base_cdn_url/production/cdn/12345678.src.css" rel="external nofollow" rel="stylesheet">
</head>
<body id="body">
 <div id="root"></div>
<script src="https://your_base_cdn_url/production/cdn/12345678.src.js"></script></body>
</html>

2、上传文件至CDN

在部署脚本中写一段上传cdn的脚本, 例:

echo "start uploading to upyun"
HOST=v0.ftp.upyun.com
USER=uploader/your-username
PASS=your-password
cd build
files=$(ls | grep -v 'index.html' | xargs)
ftp -inv $HOST <<EOF
user $USER $PASS
mkdir /$node_env/cdn
cd /$node_env/cdn
mput $files
bye
EOF
cd ..
echo "finish uploading to upyun"

将主页文件上传至服务器,使用nginx代理

server {
 listen 80;

 server_name your_server_name;
 access_log /var/log/nginx/your_project.log;
 root /var/www/your_project/production/current;

 location / {
 try_files $uri /index.html =404;
 add_header Pragma no-cache;
 expires -5y;
 }

 location ~ \.(js|css)$ {
 expires 360000;
 add_header Cache-Control "max-age=360000;";
 }
}

访问http://your_server_name即可访问使用CDN加速后网页。

以上这篇利用CDN加速react webpack打包后的文件详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
document.documentElement &amp;&amp; document.documentElement.scrollTop
Dec 01 Javascript
javascript flash下fromCharCode和charCodeAt方法使用说明
Jan 12 Javascript
JavaScript Prototype对象
Jan 07 Javascript
javascript基础之查找元素的详细介绍(访问节点)
Jul 05 Javascript
使用javascript过滤html的字符串(注释标记法)
Jul 08 Javascript
浅析JavaScript事件和方法
Feb 28 Javascript
jQuery增加自定义函数的方法
Jul 18 Javascript
jQuery EasyUI封装简化操作
Sep 18 Javascript
深入研究React中setState源码
Nov 17 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
Dec 28 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
Jan 29 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
May 06 Javascript
node内置调试方法总结
Feb 22 #Javascript
详解vue移动端日期选择组件
Feb 22 #Javascript
webpack 单独打包指定JS文件的方法
Feb 22 #Javascript
webpack中使用iconfont字体图标的方法
Feb 22 #Javascript
微信小程序之圆形进度条实现思路
Feb 22 #Javascript
webpack下实现动态引入文件方法
Feb 22 #Javascript
JavaScript 有用的代码片段和 trick
Feb 22 #Javascript
You might like
第十四节--命名空间
2006/11/16 PHP
?生?D片??C字串
2006/12/06 PHP
PHP制作3D扇形统计图以及对图片进行缩放操作实例
2014/10/23 PHP
php数字运算验证码的实现代码
2015/07/30 PHP
Laravel框架基于ajax实现二级联动功能示例
2019/01/17 PHP
PHP实现的数据对象映射模式详解
2019/03/20 PHP
php 中self,this的区别和操作方法实例分析
2019/11/04 PHP
js tab效果的实现代码
2009/12/26 Javascript
Javascript UrlDecode函数代码
2010/01/09 Javascript
jQuery学习笔记之基础中的基础
2015/01/19 Javascript
JavaScript数据结构与算法之栈与队列
2016/01/29 Javascript
jQuery常用知识点总结以及平时封装常用函数
2016/02/23 Javascript
AngularJS入门教程之多视图切换用法示例
2016/11/02 Javascript
js实现下拉框效果(select)
2017/03/28 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
原生js封装的ajax方法示例
2018/08/02 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
2018/11/28 Javascript
vue改变对象或数组时的刷新机制的方法总结
2019/04/24 Javascript
深入了解JavaScript 的 WebAssembly
2019/06/15 Javascript
JS 图片压缩原理与实现方法详解
2020/04/29 Javascript
vue实现图片裁剪后上传
2020/12/16 Vue.js
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
用python统计代码行的示例(包括空行和注释)
2018/07/24 Python
python画折线图的程序
2018/07/26 Python
PyCharm下载和安装详细步骤
2019/12/17 Python
利用 PyCharm 实现本地代码和远端的实时同步功能
2020/03/23 Python
Python使用re模块验证危险字符
2020/05/21 Python
利用Python实现Json序列化库的方法步骤
2020/09/09 Python
如何用JQuery进行表单验证
2013/05/29 面试题
葡萄牙语专业个人求职信
2013/12/10 职场文书
新学期班主任寄语
2014/01/18 职场文书
公交公司毕业生求职信
2014/02/15 职场文书
《三个小伙伴》教学反思
2014/04/11 职场文书
勤奋学习演讲稿
2014/05/10 职场文书
展览会邀请函
2015/02/02 职场文书
python实战之用emoji表情生成文字
2021/05/08 Python