javascript - 同构 reactjs cdn Assets-6ren

javascript - 同构 reactjs cdn Assets

转载作者：塔克拉玛干更新时间：2023-11-02 21:13:57

26

4

所以我几乎完成了我的第一个(同构)ReactJS，当我们部署它时，完成 build.js 有点慢。一个建议是使用 CDN 来分离 Assets 获取(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

最佳答案

更新 2:

如果您想用 cdn url 随机替换路径(根据您下面的问题)，您可以轻松修改路径替换插件脚本以允许该功能。

我基于 path-replace-plugin source code 为您创建了一个简单示例

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;

更新:

一个更简单的方法是使用 path replace plugin在网络包中。这样你就不必为你的 JS 代码添加任何复杂性

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

希望对您有所帮助。

--

(原始答案)

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

即使这样:

new webpack.DefinePlugin({
  'process.env': {
    NODE_ENV: '"production"'
  },
  __DEV__: false,

现在您知道可以在自定义函数 getImageUrl() 中使用它，您可以通过 JS 模块共享它。

环境.js

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

export const imgUrl = getImageUrl();

HiwComponent.js

import React from 'react';
import { imgUrl } from './environment';

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={`${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>
      </main>
    )
  }
}

关于javascript - 同构 reactjs cdn Assets ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37295767/

26

4

0

文章推荐： javascript - 了解设置 JQuery 变量

asset-pipeline - Rails 4 Assets 管道供应商 Assets 镜像未预编译
我在我的应用程序中使用rails 4 和 ruby 1.9.3 以及fancybox2-rails gem，但是 Assets 管道存在一个普遍问题。如果我运行 rake task 进行预编译，那
symfony - 如何在 Symfony 中使用 assetic 查看 Assets 并自动安装和转储 Assets
我把我所有的 Assets 都放在我的包里例如myBundle/Resources/public/css/ 然后像这样加载它们: {% block stylesheets %} {{ parent()
asset-pipeline - Rails 6中的 Assets 管道中不存在 Assets "application.js"
我正在创建RoR-6应用程序，并从此行的application.html.erb文件中引发以下错误: javascript_include_tag 'application', 'data-turbo
playframework - Assets 已定义为对象 Assets
我正在对 Play Subproject 功能进行更多扩展测试，如下所述:http://www.playframework.com/documentation/2.0/SBTSubProjects .
symfony - Assetic 和我的 Assets
我是 symfony 2 和 Assetic 的新手。我想在 CSS 中使用 assetic 和 Sass。我使用自定义字体。我在资源下的包中创建文件夹“assets/css”，里面有 _base.s
php - assetic - 无法写入 Assets
这是我的目录结构(这只是一个测试项目): stan@mypc:/generate_assets$ sudo tree -L 3 -p . ├── [drwxr-xr-x] assets │ └─
assets - TypeScript Assets 管理器
我使用 node.js connect/express。有人知道支持 TypeScript 源代码即时编译和缩小的 Assets 管理器吗？知道如何以编程方式调用编译器吗？我一直在使用 conn
ruby-on-rails - Rails 4 Assets 管道不会使用对其他 Assets 的 asset_path 引用覆盖 Assets
因此，我们在 Assets 管道摘要方面遇到了一个小问题，因为我们有许多 HTML 模板作为 Assets (对于 AngularJS)，并且我们使用 asset_path 在 Javascript
ios - 图片库图片网址“assets-library://asset/asset.JPG？id = 1000000007＆ext = JPG”为零
我想从iPad的照片库中获取图像URL。当我尝试从Image Piicker的信息中获取 UIImagePickerControllerReferenceURL 时我将URL设为: assets
symfony - Symfony 2 Assets fatal error :在 Assets 转储中找不到类 'Assetic\Util\PathUtils'
我正在使用带有Assetic的Symfony 2.1.10版，并且在上次 Composer 更新之后，当我尝试运行php app/console assetic:dump时出现以下错误 Dumping
ruby-on-rails - Rails 3.1.1 - Asset Pipeline - asset.prefix 不能与资源 :assets 一起使用
我的 Assets 管道有问题，我已经有一个名为 Assets 的资源/ Controller 。所以我已将 assets.prefix 选项更改为“/externals”。 config.asset
javascript - Asset.fromModule 不是函数。 (在 'Asset.fromModule(image)' 中， 'Asset.fromModule' 未定义)
更新到 Expo sdk 34 后，出现此错误:TypeError:Asset.fromModule 不是函数。 (在“Asset.fromModule(image)”中，“Asset.fromMod
playframework - Assets Controller 编译错误[值 Assets 不是对象 Controller 的成员. Assets ] Play 2.3.8
将 Play 框架项目从 2.2.4 迁移到 2.3.8 后遇到问题: 这是运行命令“activatorcompile”的错误输出: [error] ...\workspace\testproject
ruby-on-rails - Rails Assets 管道 : Can it be good practice to include asset in public folder instead of asset folder?
我在将 Google Analytics 添加到我的 Rails 4 应用程序时遇到了一些困难(参见 this post)。我通过在 /public/assets/google-analytics.
css - Assets 转储后将 Assets 恢复为动态模式
我正在使用 Symfony2 和 Assetic。最近我一直在做很多 CSS 工作，所以在某个时候我需要命令 $ php app/console assetic:dump --env=prod --n
android-assets - 什么是 Android Assets ？
我正在 Android 开发中迈出第一步，并遇到了 Assets 一词。据我了解， Assets 只是一个未被解析或引用为资源的文件。这个词有更准确的定义吗？我应该在哪些情况下在我的应用程序中使用
javascript - Assets 管道未从rails-assets gem加载脚本
我添加了 danial-farid--angular-file-upload通过 Rails Assets 将库添加到我的 Rails 4 应用程序。主库加载正常，但 sprockets 找不到它包含
java - 有没有一种有效的方法来检查子目录并通过Android Assets 文件夹中的相对路径加载 Assets ？
这是我的代码，尽管编码非常粗糙: public void loadStack(AssetManager manager, String path) { String[] lis
symfony - Assetic - 如何禁用 Assets 组合？
我正在使用 Assets 管理我的 Symfony 2 框架中的 CSS 文件。它在生产模式下运行良好。我的问题是在 Debug模式下，assetic 不断将我的文件合并为一个输出文件。这使得跟踪特
ios - 如何在不从照片应用程序中删除 Assets /照片的情况下从相册中删除 Assets ？
我想以编程方式从重复的相册中删除 Assets (照片不是)。我可以使用照片框架删除相册我想知道如何从相册中删除 Assets 而不从照片应用中完全删除它。我想在多个地方使用它，例如将 Assets

首页

博学

6Ren·AI

商城

javascript - 同构 reactjs cdn Assets

更新 2:

更新: