npm run serve でホットリロードがとても遅い時

2021年8月18日

docker desktop for windows 環境で開発していましたが、npm run serve してコードを修正するとホットリロードに 8　秒くらいかかったいて、さすがに開発する気力が失われてきそうだったので調べてみました。

参考

原因

どうやら CPU が 100% 超えているのでこれが原因のようでした。

docker stats
CONTAINER ID   NAME           CPU %     MEM USAGE / LIMIT     MEM %     NET I/O           BLOCK I/O   PIDS
e2bc207f5cfs   xxx_db_1    0.06%     187.7MiB / 5.979GiB   3.07%     1.63kB / 0B       0B / 0B     27  
1b7d94ca0bes   xxx_web_1   100.91%   178.4MiB / 5.979GiB   2.91%     50.6kB / 1.03MB   0B / 0B     25

対策

vue.config.js の watchOptions に ignored: /node_modules/ を追記いたしました。

module.exports = {
    devServer: {
        proxy: 'http://localhost:8000',
        watchOptions: {
            ignored: /node_modules/,
            poll: true
        },
        disableHostCheck: true
    }
};

結果

12% - 18% に収まるようになりました。

CONTAINER ID   NAME           CPU %     MEM USAGE / LIMIT     MEM %     NET I/O         BLOCK I/O   PIDS
c2c0dfebf39s   xxx_db_1    0.09%     183.1MiB / 5.979GiB   2.99%     1.35kB / 0B     0B / 0B     27  
eec3e030e32s   xxx_web_1   12.22%    195.7MiB / 5.979GiB   3.20%     32kB / 1.96MB   0B / 0B     25

YouTube