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!