利用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 相关文章推荐
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
Jan 24 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
Apr 17 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
Oct 25 Javascript
js改变css样式的三种方法推荐
Jun 28 Javascript
JavaScript中localStorage对象存储方式实例分析
Jan 12 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
May 26 Javascript
Vue.js 单页面多路由区域操作的实例详解
Jul 17 Javascript
webpack 单独打包指定JS文件的方法
Feb 22 Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 Javascript
微信小程序实现点赞、取消点赞功能
Nov 02 Javascript
详解用场景去理解函数柯里化(入门篇)
Apr 11 Javascript
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
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
php实现的MySQL通用查询程序
2007/03/11 PHP
PHP学习笔记 (1) 环境配置与代码调试
2011/06/19 PHP
PHP获取当前日期和时间及格式化方法参数
2015/05/11 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
PHP文件操作之获取目录下文件与计算相对路径的方法
2016/01/08 PHP
PHP的压缩函数实现:gzencode、gzdeflate和gzcompress的区别
2016/01/27 PHP
利用Ext Js生成动态树实例代码
2008/09/08 Javascript
点击文章内容处弹出页面代码
2009/10/01 Javascript
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
jquery使用each方法遍历json格式数据实例
2015/05/18 Javascript
九种原生js动画效果
2015/11/11 Javascript
Angularjs---项目搭建图文教程
2016/07/08 Javascript
BootStrap 动态表单效果
2017/06/02 Javascript
Bootstrap 3多级下拉菜单实例
2017/11/23 Javascript
nodejs超出最大的调用栈错误问题
2017/12/27 NodeJs
video.js 一个页面同时播放多个视频的实例代码
2018/11/27 Javascript
Vue循环遍历选项赋值到对应控件的实现方法
2020/06/22 Javascript
python实现kNN算法
2017/12/20 Python
Django中使用celery完成异步任务的示例代码
2018/01/23 Python
Python实现的连接mssql数据库操作示例
2018/08/17 Python
Python自动化运维之Ansible定义主机与组规则操作详解
2019/06/13 Python
利用Python校准本地时间的方法教程
2019/10/31 Python
opencv 查找连通区域 最大面积实例
2020/06/04 Python
python中xlutils库用法浅析
2020/12/29 Python
使用postMessage让 iframe自适应高度的方法示例
2019/10/08 HTML / CSS
全球领先的鞋类零售商:The Walking Company
2016/07/21 全球购物
澳大利亚潮流尖端的快时尚品牌:Cotton On
2016/09/26 全球购物
英国领先的名牌服装折扣零售商:Brown Bag Clothing
2019/01/08 全球购物
如何做好总经理助理
2013/11/12 职场文书
学生会宣传部部长竞选演讲稿
2014/04/25 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
中小学生学籍证明
2014/10/25 职场文书
12.4全国法制宣传日活动总结
2014/11/01 职场文书
新兵入伍决心书
2015/09/22 职场文书
党员心得体会范文2016
2016/01/23 职场文书
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis