How to Increase Your Page Size by 1,500% with webpack and Vue

This article tells the story of how the author used Webpack and Vue to dramatically increase the size of CSS files, and finally solved this problem with improved methods. Instead of encouraging increasing page size, the article shows ironic views and solutions encountered in the process of using the Bulma framework and Vue CLI.

Disclaimer: This article is ironic. The author does not think he is smarter than the readers, nor does he think that increasing the size of the web page is a good thing.

Many articles teach you how to reduce page size: optimize pictures, remove redundant CSS rules, and more. The author takes Walmart as an example to point out the reduction in its page size.

JavaScript optimization suggestions:

?️ Delete old and duplicate dependencies? Replace large dependencies with small dependencies? Check if it is overpolyfill? Clean up A/B test configuration✂️ Code splitting!

Walmart did this on its website. JS packages are reduced by 69%. Interaction time was reduced by 28%.

However, few articles teach you how to increase page size. The author tried to find relevant information, but only found an article about increasing the font size.

Unexpected "weight gain"

Why increase the page size? Isn't this a good thing for low bandwidth users? The author gives some seemingly reasonable but actually slightly funny reasons:

1. You have gigabit bandwidth and live in Tennessee (hint that the network is superior).
2. The browser will cache, you only need to download the website once.
3. You don't care if anyone visits your website because you "work for life, not for work."

If you agree with these reasons, the author will show how to increase CSS size by 1500%—just a simple Webpack trick.

Wonderful tips

The author discovered this problem when refactoring the project to the Bulma CSS framework. The initial code was chaotic, and the Sass code was like a scene in the "Housker" show.

Bulma includes functions such as modal boxes. The author used third-party Vue components. It also has a burger menu, as it is a well-known must-have element for successful websites.

After the reconstruction was completed, the authors found that the CSS size increased significantly. The initial hand-written code was only 30KB (after gzip compression), and after reconstruction, it reached 260KB. Vue CLI also warned about this, but the author ignored it.

The author deployed the project to production environment and announced this "achievement" on Twitter. Jeremy Thomas, the creator of Bulma, responded to this, pointing out that the CSS size increased because of the presence of a large number of duplicate styles.

The problem lies

The author admits that he doesn't know much about CSS and Sass. When using the Vue CLI project, the author created a src/styles folder and placed a bulma-but-not-all-of-bulma-only-some-of-it.scss file which imports some of the Bulma components. Then, import the file into the custom Sass file site.scss .

To use these styles in each component, the author used the method from a blog post by Sarah Drasner to modify the Webpack build process by modifying the vue.config.js file.

What the author didn't understand is that this approach would import Sass into each Vue component. This results in a lot of duplicate styles, as Vue adds data-v- attributes to each component.

How to deal with scoped

Vue allows the style scope to be restricted to components, implemented by dynamically inserting data- properties. If you import a Sass file containing styles in the component, Vue (via Webpack) namespaces these styles with the dynamic data- properties.

Variable Sharing Problems

You can't define a Sass variable in one component and reference it in another component.

Best practices for using Bulma and Vue

To solve this problem, the author recommends using three files: variables.scss (import Bulma variables), bulma-custom.scss (import Bulma components), and site.scss (define global styles). Import site.scss into main.js file and add variables.scss to vue.config.js file.

This way, Bulma is available globally and all Bulma variables can be accessed in each component. The CSS size eventually decreased significantly.

Improved solutions

The author also submitted a PR to Bulma document explaining how to customize Bulma in a Vue CLI project.

The above is the detailed content of How to Increase Your Page Size by 1,500% with webpack and Vue. For more information, please follow other related articles on the PHP Chinese website!