I have a Vue3 project using the CLI to compile my .Vue files. The project has multiple "entry points" (roughly correlated to my Asp.net MVC Views).
For the most part, I'm fine with combined chunk-vendor output files, but there are some pages that have extra heavy imports that are causing the chunk-vendor files to be unnecessarily bloated for the rest of the project (as some users will never hit those "heavy" pages).
For those specific pages, I want to use my vue.config.js file to tell webpack to pack the dependencies for that page into its own separate file.
I've been able to figure out how to configure that behavior for .JS imports. For CSS however, Webpack seems to give every one of my entry points its own CSS file for inline <style> tags, but any style that's been imported, gets packed into a "chunk-vendor.css".
How do I configure Webpack to either:
a.) put all CSS for all JS/Vue modules into their own .CSS files (including anything brought in with import), or
b.) call out specific imports as needing to go into their own file
My current vue.config.js looks as follows:
module.exports = defineConfig({
outputDir: './wwwroot/vuedist',
lintOnSave: false,
filenameHashing: false,
css: {
},
chainWebpack: config => {
// Get an array of all view files in the project's View directories
const views = glob.sync('./Views/**/*.cshtml');
// Loop through each view file and add corresponding JS file as an entry point
views.forEach(view => {
const viewPath = path.dirname(view);
const viewFileName = path.basename(view, '.cshtml');
const jsFilePath = `./${viewPath}/${viewFileName}.js`;
// Check if the JS file exists before adding it as an entry point
if (fs.existsSync(jsFilePath)) {
const entryName = `${viewPath}/${viewFileName}`;
const outputFileName = `${viewFileName}.js`;
config.entry(entryName).add(jsFilePath);
config.output.filename(outputFileName);
}
});
},
configureWebpack: {
optimization: {
splitChunks: {
cacheGroups: {
// Syncfusion imports go into their own file
syncfusion: {
test(mod/* , chunk */) {
if (mod.context) {
if (['syncfusion'].some(str => mod?.context?.includes(str))) {
return true;
}
}
return false;
},
name: 'syncfusion',
chunks: 'all',
},
// FilePond imports go into their own file.
filepond: {
test(mod) {
if (mod.context) {
if (['filepond'].some(str => mod?.context?.includes(str))) {
return true;
}
}
return false;
},
name: 'filepond',
chunks: 'all',
},
}
}
},
resolve: {
alias: {
'@': path.resolve(__dirname, './Views'),
'npm': path.resolve(__dirname, './node_modules')
}
},
output: {
filename: '[name].js',
chunkFilename: '[name].[ext]',
},
},
});