ionic / angular，如何在每次发布后强制客户端清除其浏览器缓存？

Question

我开发了一个使用离子本机4.7.0的应用程序。 每次我要在线发布应用程序时，我都会使用命令ionic build --minifyjs --minifycss --optimizejs。很好，但是我的客户仍然可以使用旧的JS和CSS。他们必须清理浏览器缓存才能查看其演变。

以下是我的“汇编”来源的图片：

我的0.js，1.js等是延迟加载的页面，并由我的客户端浏览器缓存。如何在每次部署后强制浏览器重置缓存？

谢谢！

Answer 1

尝试使用缓存版本控制

在文件路径末尾添加？v = {the version} 像这样

<script src="build/main.js?v=1"></script>

Answer 2

我在https://forum.ionicframework.com/t/bundled-files-and-cache-busting-lazy-loading/109114/9找到了可行的解决方案

在项目中使用以下内容创建文件config/webpack.config.js：

    var webpack = require('webpack');
    const defaultWebpackConfig = require('../node_modules/@ionic/app-scripts/config/webpack.config.js');

    module.exports = function () {
        defaultWebpackConfig.prod.output['chunkFilename'] = "[name].[chunkhash].chunk.js";
        defaultWebpackConfig.dev.output['chunkFilename'] = "[name].[chunkhash].chunk.js";
        return defaultWebpackConfig;
    };

在您的package.json中引用此配置：

    "config": {
        "ionic_webpack": "./config/webpack.config.js"
    }

然后文件0.js，1.js，...将获得随机名称，例如0.91d798902e4dca77e704.chunk.js，再也没有缓存问题！

Answer 3

感谢@andi的建议。这是我的ionic_webpack.config.js

const defaultWebpackConfig = require("../node_modules/@ionic/app-scripts/config/webpack.config.js");

module.exports = function() {
    defaultWebpackConfig.output["filename"] = "[name].[chunkhash].js";
    return defaultWebpackConfig;
};

Answer 4

只需为生产构建它：

ionic cordova build browser --release --prod