同构 reactjs cdn 资产

Question

同构 reactjs cdn 资产

ind*_*dex 5 javascript cdn reactjs webpack

所以我几乎完成了我的第一个（同构）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/

Run Code Online (Sandbox Code Playgroud)

我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>

Run Code Online (Sandbox Code Playgroud)

和一些有图像的组件

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>
    )
  }
}

Run Code Online (Sandbox Code Playgroud)

我如何开始更改它以使用 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

Grg*_*gur 3

更新2：

\n\n

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

\n\n

我根据path-replace-plugin 源代码为您创建了一个快速示例

\n\n

var fs = require(\'fs\');\nvar fileExists = require(\'file-exists\');\nvar loaderUtils = require(\'loader-utils\');\nvar CDNs = [\n  \'//cdn0.amazon.com\',\n  \'//cdn1.amazon.com\',\n  \'//cdn2.amazon.com\',\n];\n\nmodule.exports = function(source) {\nthis.cacheable && this.cacheable();\nvar options = loaderUtils.parseQuery(this.query);\n\n    if (this.resourcePath.indexOf(options.path) > -1) {\n        var cdn = CDNs[Math.floor(Math.random()*CDNs.length)];\n        var newPath = this.resourcePath.replace(options.path, cdn + options.replacePath);\n        if (fileExists(newPath)) {\n            // Introduce file to webpack in order to make them watchable\n            this.dependency(newPath);\n            return fs.readFileSync(newPath);\n        }\n    }\n\n    return source;\n};\n\nmodule.exports.raw = true;\n

Run Code Online (Sandbox Code Playgroud)\n\n

更新：

\n\n

更简单的方法是使用Webpack 中的路径替换插件。这样你\xe2\x80\x99就不必为你的JS代码添加任何复杂性

\n\n

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

Run Code Online (Sandbox Code Playgroud)\n\n

我希望这有帮助。

\n\n

--

\n\n

（原答案）

\n\n

如果您使用 Webpack，那么您的产品构建可以注入一个标志（变量），您可以在应用程序中使用该标志（变量）来了解您是否处于生产状态或开发状态。

\n\n

甚至这个：

\n\n

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

Run Code Online (Sandbox Code Playgroud)\n\n

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

\n\n

环境.js

\n\n

function getImageUrl() {\n    return __DEV__ ? \'/\' : \'//cdn.amazon.com/\';\n}\n\nexport const imgUrl = getImageUrl();\n

Run Code Online (Sandbox Code Playgroud)\n\n

HiwComponent.js

\n\n

import React from \'react\';\nimport { imgUrl } from \'./environment\';\n\nexport default class HiwComponent extends React.Component {\n  render() {\n    return (\n      <main className="box-960 box-center"> \n\n        <h1 className="mt-64">How It Works</h1>\n\n        <ul id="how">\n          <li>\n            <img src={`${imgUrl}assets/img/ico-how-time.svg`} onError={() => { this.onerror=null; this.src=`${imgUrl}assets/img/ico-how-time.png` }} alt="Pick" />\n            <p><b>Pick</b> a time</p>\n          </li>\n          <li>\n            <img src={`${imgUrl}assets/img/ico-how-plane.svg`} onError={() => { this.onerror=null; this.src=`${imgUrl}assets/img/ico-how-plane.png` }} alt="Send" />\n            <p><b>Send</b> request</p>\n          </li>\n        </ul>\n      </main>\n    )\n  }\n}\n

Run Code Online (Sandbox Code Playgroud)\n

归档时间：	9 年，8 月前
查看次数：	1048 次
最近记录：	9 年，7 月前