老师你好,保存的时候总是自动刷新很慢

老师你好,保存的时候总是自动刷新很慢

用webpack-dev-server这个插件,保存时浏览器自动刷新加载很慢,这是为什么呢老师?

https://img1.sycdn.imooc.com//climg/623c968a0938afe112670937.jpg

上面一直在转圈圈,每次保存自动刷新要10秒左右才能把页面加载完成,很烦,我用的是谷歌浏览器,我的浏览器已经是最新版本,请问这个问题怎么解决呢?

这是我的webpack.config.js:

const path = require("path");
const resolve = (p) => path.resolve(__dirname, p);
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  mode: "development",
  entry: {
    index: "./src/pages/index/index.js",
    destination: "./src/pages/destination/index.js",
    details: "./src/pages/details/index.js",
  },
  output: {
    path: resolve("dist"),
    filename: "js/[name].js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      // 处理图片:
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              name: "images/[name].[ext]",
              limit: 10000,
              esModule: false,
            },
          },
        ],
      },
      // 处理字体
      {
        test: /\.(woff2?|ttf|svg|eot)$/,
        loader: "url-loader",
        options: {
          name: "fonts/[name].[ext]",
          limit: 10000,
        },
      },
      // 处理art文件
      {
        test: /\.art$/,
        loader: "art-template-loader",
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/pages/index/index.art",
      filename: "index.html",
      chunks: ["index"],
    }),
    new HtmlWebpackPlugin({
      template: "./src/pages/destination/destination.art",
      filename: "destination.html",
      chunks: ["destination"],
    }),
    // 详情页
    new HtmlWebpackPlugin({
      template: "./src/pages/details/details.art",
      filename: "details.html",
      chunks: ["details"],
    }),
  ],

  // source-map,调试用的,出错的时候,将直接定位到原始代码,而不是转换后的代码
  devtool: "cheap-module-eval-source-map",
  resolve: {
    // 自动补全(可以省略)的扩展名
    extensions: [".js"],
    // 路径别名
    //不能用在art文件中引入的组件路径,因为那个不是webpack打包处理的,是art-template-loader和art-template处理的
    // 哪里可以用?1、js,webapck亲自处理。2、css,js引入了css
    alias: {
      api: resolve("src/api"),
      utils: resolve("src/utils"),
      fonts: resolve("src/assets/fonts"),
      images: resolve("src/assets/images"),
      styles: resolve("src/assets/styles"),
      icon: resolve("src/assets/icon"),
      components: resolve("src/components"),
      pages: resolve("src/pages"),
    },
  },
};

package.json:

{
  "name": "m-mall",
  "version": "1.0.0",
  "description": "慕云游移动端",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --open 'chrome'",
    "build": "webpack --config webpack.config.js --mode production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "art-template-loader": "^1.4.3",
    "css-loader": "^4.2.1",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.3.0",
    "style-loader": "^1.2.1",
    "url-loader": "^4.1.0",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "art-template": "^4.13.2",
    "swiper": "^7.4.1"
  }
}

很苦恼,开发效率非常低,求老师帮帮忙!

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕小李 2022-03-25 10:51:44

同学你好,从配置上并没有看出问题点,但老师猜测同学在开始的时候应该是没有卡的现象,是不是越往后越卡?自动化工具对性能消耗的确比较大,另如果同学本身已经用电脑学了一天了,后面再使用自动化工具也会出现这样的问题。或者把自动刷新关掉,因为webpack是针对dom更新就做刷新的。

祝学习愉快!

  • 我重启过电脑也是这样,刚开始也是这样,刚打开项目npm start就能加载出来,一改代码就转圈10秒页面才渲染完成。我电脑是i5 10400  16g内存的,按理说性能没问题啊,我改个背景颜色还要等半天才能看到效果,很烦,求老师支个招呀,学习很不愉快 (ಥ﹏ಥ)

    2022-03-25 11:06:00
  • 同学你好,

    1、有个配置devServer的方法,webpack.config.js文件中module.exports = {}内配置devServer,如下:

    https://img1.sycdn.imooc.com//climg/623d45fc095e28a506120200.jpg

    devServer: {

            inline: false,

            compress: false,

        },


    添加好配置代码后,保存关掉项目。重新起遍项目试试。

    2、其他浏览器是否存在相同的问题?如没问题就先用其他浏览器吧。

    同学自己试试,祝学习愉快!

    2022-03-25 12:16:23
  • 我擦,有用!!!!感谢老师,感谢亲爱的李老师!!!!!

    可以讲解下

    devServer: {

            inline: false,

            compress: false,

        },

    里面是什么意思吗?为什么这样就很快加载了,devServer里还可以添加什么属性?

    2022-03-25 23:15:36
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师