Question

所以我几乎完成了我的第一个（同构）ReactJS，当我们部署它时，完成build.js的速度有点慢。一个建议是使用CDN分离资产获取（cdn0，cdn1，cdn2 ......），我想知道我在我的网站中是如何做到这一点的。本地我的结构是

- build/
- config/
  - webpack-development.config.js
  - webpack-production.config.js
- node_modules/
- package.json
- public/
  - assets/ // (this is where my assets are)
    - css/
    - img/
  - build.js
- README.md
- src/
- views/

我的index.ejs现在就像这样

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <base href="/" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/ico-a-brain.png" />
    <link rel="stylesheet" href="assets/css/normalize.css">
    <link rel="stylesheet" href="assets/css/all.css">
    <!-- bunch more assets here -->
  </head>

  <body>
    <script type="text/javascript">
      window.__INITIAL_STATE__ = <%- JSON.stringify(initialState) %>;
    </script>

    <div id="app"><%- markup %></div>
    <script src="build.js"></script>
  </body>
</html>

和一些有图像的组件

import React from 'react';

export default class HiwComponent extends React.Component {
  render() {
    return (
      <main className="box-960 box-center"> 

        <h1 className="mt-64">How It Works</h1>

        <ul id="how">
          <li>
            <img src="assets/img/ico-how-time.svg" onError={() => { this.onerror=null; this.src='assets/img/ico-how-time.png' }} alt="Pick" />
            <p><b>Pick</b> a time</p>
          </li>
          <li>
            <img src="assets/img/ico-how-plane.svg" onError={() => { this.onerror=null; this.src='assets/img/ico-how-plane.png' }} alt="Send" />
            <p><b>Send</b> request</p>
          </li>
        </ul>
      </main>
    )
  }
}

如何开始更改以使用CDN？你们用一些包来处理吗？基本上我认为它应该像本地一样仍然使用./assets/css/some.css和./assets/img/some.jpg，而在制作时它可能会看http://cdn0.amazon.com/assets/css/some.css或http://cdn1.amazon.com/assets/img/some.jpg

Answer 1

更新2：

如果你想用cdn url随机替换路径（根据你的问题），你可以轻松地修改路径替换插件脚本以允许该功能。

我根据path-replace-plugin source code

为您创建了一个快速示例

$scope.filtered.length

UPDATE：

更简单的方法是在Webpack中使用path replace plugin。这样您就不必为JS代码添加任何复杂性

var fs = require('fs');
var fileExists = require('file-exists');
var loaderUtils = require('loader-utils');
var CDNs = [
  '//cdn0.amazon.com',
  '//cdn1.amazon.com',
  '//cdn2.amazon.com',
];

module.exports = function(source) {
this.cacheable && this.cacheable();
var options = loaderUtils.parseQuery(this.query);

    if (this.resourcePath.indexOf(options.path) > -1) {
        var cdn = CDNs[Math.floor(Math.random()*CDNs.length)];
        var newPath = this.resourcePath.replace(options.path, cdn + options.replacePath);
        if (fileExists(newPath)) {
            // Introduce file to webpack in order to make them watchable
            this.dependency(newPath);
            return fs.readFileSync(newPath);
        }
    }

    return source;
};

module.exports.raw = true;

我希望有所帮助。

-

（原始答案）

如果您使用Webpack，那么您的prod构建可以注入一个标记（变量），您可以在应用程序中使用该标记来了解您是在生产还是开发。

即便如此：

module.exports = {
  module: {
    loaders: [
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loader: 'path-replace?path=assets&replacePath=//cdn.amazon.com/assets'
      }
    ]
  }
};

现在您知道可以在自定义函数new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' }, __DEV__: false,中使用它，您可以通过JS模块共享它。

<强> environment.js

getImageUrl()

<强> HiwComponent.js

function getImageUrl() {
    return __DEV__ ? '/' : '//cdn.amazon.com/';
}

export const imgUrl = getImageUrl();

Answer 2

如果你在谈论静态资产，如Javascript，CSS和图像文件，最好的解决方案是使用CSS管理图像。

而不是携带您的webpack配置的CDN域/路径，并在构建时将其连接到您的反应代码，如grgur建议：

<ul id="how">
  <li>
    <img src={`${imgUrl}assets/img/ico-how-time.svg`} onError={() => { this.onerror=null; this.src=`${imgUrl}assets/img/ico-how-time.png` }} alt="Pick" />
    <p><b>Pick</b> a time</p>
  </li>
  <li>
    <img src={`${imgUrl}assets/img/ico-how-plane.svg`} onError={() => { this.onerror=null; this.src=`${imgUrl}assets/img/ico-how-plane.png` }} alt="Send" />
    <p><b>Send</b> request</p>
  </li>
</ul>

我认为使用CSS管理图像的绝对路径会更好，假设您正在使用SASS，CDN中的资产目录结构如下：

请注意，它是相同的CDN（http://cdn0.amazon.com/）

some.css的内容：

.box-960 {
  .mt-64 {
    #how { // BTW, avoid using ID's for CSS
      .ico-how-time {
        background-image: url(../img/ico-how-time.svg);
      }
      .ico-how-plane {
        background-image: url(../img/ico-how-plane.svg);
      }
    }
  }
}

您将独立于域/ CDN /文件夹引用图像，并且您需要在反应代码中进行的一项更改是使用CSS类而不是放置图像路径+名称：

<ul id="how">
  <li>
    <div className="ico-how-time" />
    <p><b>Pick</b> a time</p>
  </li>
  <li>
    <div className="ico-how-plane" />
    <p><b>Send</b> request</p>
  </li>
</ul>

此外，您必须弄清楚图像的其余样式，使其看起来像使用IMG标记，即高度，宽度等。

这是我想到的。

同构反应资产

2 个答案:

更新2：

UPDATE：