1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
      <output id="hzk7v"></output>
    2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
    3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

      详解关于webpack多入口热加载很慢的原因

       更新时间£º2019年04月24日 11:40:24   作者?#21495;?#19971;哥   我要评论

      这篇文章主要介绍了详解关于webpack多入口热加载很慢的原因£¬小编觉得挺不错的£¬现在分享给大家£¬也给大家做个参考¡£一起跟随小编过来看看吧

      之前为公司搭建了套webpack多页面应用脚手架£¬起初用得挺爽£¬资源整合打包£¬组件化开发£¬各种组件复用£¬需要什么就拿什么£¬后来入口有50个页面了£¬慢慢的发现了?#30475;?#25353;保存后的热加载等待时间越来越长£¬需要等待10几秒£¬实在太影响开发效率£¬于是?#20063;?#25214;原因¡£

      观察发现£¬?#30475;?#21040;热加载时会在emitting HtmlWebpackPlugin这停留很久¡£


      于是我想知道它到底停留了多长时间呢£¿

      在package.json内加入--profile£¬它会告诉你编译过程中哪些步骤耗时最长¡£

      停止npm£¬重新运行webpack-dev-server£¬修改下文件按保存£¬观察控制台£¬发现总花费时长为15035毫秒£¬在emitting就花费了13239毫秒£¬这emitting应该就是指上面的?#35745;?#30340;emitting HtmlWebpackPlugin了£¬看来我们解决HtmlWebpackPlugin£¬热加载速度就能恢复正常了¡£


      HtmlWebpackPlugin就是我们入口对应的的html页面£¬new的页面越多£¬热加载速度就会越慢¡£

      ?#39029;?#35797;注释掉所有html页面£¬只留下一个案例详情html页面£¬重新启动webpack-dev-server£¬修改文件按下保存£¬发现速度惊人£¬只用了772毫米£¬看来问题出在html-webpack-plugin这个插件上¡£



      难道是我的html-webpack-plugin配置有问题吗£¬于是我在网上寻找解决办法£¬做了各种尝试£¬直到我找到html-webpack-plugin的github上放弃寻找了£¬原来插件作者有发?#25216;?#21313;条lssues£¨链接https://github.com/jantimon/html-webpack-plugin/issues£©£¬其中就包括该插件的多页面性能问题¡£


      ?#39029;?#35797;点进问题谈论里面看了看£¬里面的谈论已经不能算是怎样配置html-webpack-plugin插件了£¬涉及webpack底层的东西£¬觉得没必要去深究了£¬也让人不得不思考webpack现在是否适合多页面开发啊¡£¡£

      总结£º

      1¡¢HtmlWebpackPlugin除了正在开发的页面£¬其它注释掉¡£

      2¡¢等待插件作者修复此问题¡£

      以上就是本文的全部内容£¬希望对大家的学习有所帮助£¬也希望大家多多支持脚本之家¡£

      相关文章

      最新评论

      3dÊÔ»úºÅÖвÊÍø

        1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
          <output id="hzk7v"></output>
        2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
        3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

            1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
              <output id="hzk7v"></output>
            2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
            3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>