search

vuejs-templates / pwa

PWA template for vue-cli based on the webpack template
MIT License
3.04k stars 508 forks source link

adding simple html causes the npm run dev build time to get extremely high! #164

Open vesper8 opened 6 years ago

vesper8 commented 6 years ago

I'm using this for the first time. I started from a fresh project then ran

vue init pwa#development my-project

I'm just testing and learning. I created a new component and added a route for it. In my component I pasted some static html I have for a navigator bar

This html has a lot of href tags in it, close to 100. I'm noticing that with this very small amount of html added the build time when running npm run dev went from 1500ms to a staggering 110000ms !!

This is an example of the html

                        <li class="dropdown-short">
                            <a data-toggle="dropdown" href="/home" class="dropdown-toggle">Season</a>
                            <ul class="dropdown-menu">
                                <li class="dropdown-header">Current Season</li>
                                <li><a href="/home">2017 - 2018</a></li>
                                <li class="divider"></li>
                                <li class="dropdown-header">Past Season</li>
                                <li><a href="/home">2016 - 2017</a></li>
                                <li><a href="/home">2015 - 2016</a></li>
                                <li><a href="/home">2014 - 2015</a></li>
                                <li><a href="/home">2013 - 2014</a></li>
                                <li><a href="/home">2012 - 2013</a></li>
                                <li><a href="/home">2011 - 2012</a></li>
                                <li><a href="/home">2010 - 2011</a></li>
                                <li><a href="/home">2009 - 2010</a></li>
                                <li><a href="/home">2008 - 2009</a></li>
                                <li><a href="/home">2007 - 2008</a></li>
                                <li><a href="/home">2006 - 2007</a></li>
                                <li><a href="/home">2005 - 2006</a></li>
                            </ul>
                        </li>

npm run build manages to build it in 6500ms, but npm run dev takes over 100 seconds!

What is going on here? This is a tiny amount of html.. I can't imagine after I paste the rest of my html in there..

I've also tried looking for a way to enable --progress or --profile but I am not used to using configuration files and can't figure out how to add an option so I can actually see WHAT is taking so long

maxmilton commented 6 years ago

I typically add something like this to my package.json scripts:

"profile": "NODE_ENV=production webpack --verbose true --progress --profile --json --config build/webpack.prod.conf.js > compilation-stats.json",

it may help.