CDN加速react webpack打包文件过程

2018.04.16 关键词:

  这次上海网站建设给大家带来CDN加速react webpack打包文件过程,CDN加速react webpack打包文件过程的注意事项有哪些,下面就是实战案例,一起来看一下。

 

  此文不介绍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>

 

  <head>

 

  <title>title</title>

 

  <link href=http://www.php.cn/"https://your_base_cdn_url/production/cdn/12345678.src.css"rel="external nofollow"rel="stylesheet">

 

  </head>

 

  <body id="body">

 

  <p id="root"></p>

 

  <script src=http://www.php.cn/"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://www.mfcool.com/newsshow/136.html


关键词
最新推荐