AccAdmin's avatar

Mix Compile sizes Vs Vue-CLI

I've migrated a project over from Vue-CLI into Mix and everything has gone smoothly with the exception of the compiled sizes of both the app.js and app.css files.

As a comparison my CSS using PurgeCSS and the same purge config settings compiles down to 64KB in Vue-CLI but sits at 124KB in Mix.

The app.js file in Vue-CLI is 491KB and a whopping 676KB in Mix.

I figure I'm missing a config option or two, but I'm not sure which.

webpack.mix.js has...

const mix = require('laravel-mix');
require('laravel-mix-purgecss');

mix.js('resources/js/weblink/main.js', 'public/weblink/js/app.js')  
    .sass('resources/sass/weblink.scss', 'public/weblink/css/app.css')
    .purgeCss({            
            whitelist: ["svg", '[aria-hidden="true"]', ":before", "::before", "i", "em", "p"],
            whitelistPatterns: [/^hooper-/, /^(.*?(\b-print\b)[^$]*)$/],
            whitelistPatternsChildren: [/^hooper-/, /^(.*?(\b-print\b)[^$]*)$/]
    })
    .options({processCssUrls: false})
if (mix.inProduction()) {
    mix.version();
}

My old Vue-CLI vue.config.js

const webpack = require("webpack");
const path = require("path");

module.exports = {
    pluginOptions: {
        "style-resources-loader": {
            preProcessor: "scss",
            patterns: [path.resolve(__dirname, "./src/styles/app.scss")]
        },       
    },
    configureWebpack: {
        plugins: [
            new webpack.optimize.LimitChunkCountPlugin({
                maxChunks: 1
            })
        ]
    },
    chainWebpack: config => {
        config.optimization.delete("splitChunks");
    },
    filenameHashing: false
};

My VUE-CLI babel.config.js is pretty simple.

module.exports = {
    presets: [["@babel/env", { useBuiltIns: "entry" }], "@vue/cli-plugin-babel/preset"]  
};

My Vue-CLI PostCSS config has purgecss() contents exactly the same with the whitelist,whitelistPatterns,whitelistPatternsChildren as above and includes autoprefixer.

Any pointers would be great!

0 likes
1 reply
AccAdmin's avatar
AccAdmin
OP
Best Answer
Level 2

Ok, I just thought I'd mention that one of the things we had not setup at the time of my last post was our babel polyfills for IE11. (Ya I know.)

Once I added a .babelrc file with our config and targets we had a rather drastic file size reduction! This got us within a much closer margin @ 504KB and 554KB.

The target browsers in our new builds are also a bit larger which might be a contributing factor in the current file sizes, but in either case we are at a much more comfortable size now.

Please or to participate in this conversation.