Question

我正在使用Create React应用程序和Apache。而且我有一个缓存清除问题。每次更改代码并部署服务器时，chrome都不会获得新代码，而是获得旧代码。因此，我进行了搜索，发现该问题是由缓存破坏引起的。我看到了以下代码作为解决方案。

<link rel="stylesheet" type="text/css" href="theme.css?version=20190416">

是在文件名之后写版本。但是我不知道如何应用上述方法来做出反应。

这是我的反应代码。

App.js

import React, {Component} from 'react';
import './App.css';
import {Route, Switch} from "react-router-dom";
import Homefrom "./page/Home";
import About from "./page/About";

class App extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
             <Switch>
                 <Route exact path="/home" component={Home}/>
                 <Route exact path="/about" component={About}/>
             </Switch>
        );
    }
}

export default withRouter(App);

Root.js

const Root = () => {
return (
    <Router history={history}>
        <Route path="/" component={App}/>
    </Router>
);
};

export default Root;

index.js

import React from 'react';
import ReactDOM from 'react-dom'
import 'core-js';
import 'react-app-polyfill/ie11';
import './index.css';
import * as serviceWorker from './serviceWorker';
import Root from "./Root";

ReactDOM.render(<Root/>, document.getElementById('root'));

serviceWorker.unregister();

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React.js</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

我还阅读了有关如何在webpack.config.js文件中设置输出文件的信息，但我不明白。请有人帮我。谢谢您的阅读。

Answer 1

此问题是因为您需要对分发包进行哈希处理，以便浏览器在看到哈希值已更改时将破坏缓存。在您的webpack配置中，您需要像这样设置输出属性：

output: {
   filename: "[name].[hash].js",
   chunkFilename: "[name].[hash].js"

}，

其中filename是您从React生成的包，而chunkFilename是Webpack的小代码，它分成多个文件以提高性能。在Apache方面，您需要确保每当找到不同的文件名时都在破坏缓存，但这是默认情况下设置的。

如何在React.js中对文件或文件夹名称进行版本控制？

1 个答案: