Vuejs Webpack Template Split Vendor CSS

December 20, 2017

If you are using vuejs-templates/webpack, the production build (npm run build) will create 3 JavaScript files (app.[hash].js, vendor.[hash].js, manifest.[hash].js) while there is only 1 CSS file (app.[hash].css).

I would like to create 2 CSS files (app.[hash].css and vendor.[hash].css).

Note: Why need separate vendor.[hash].css? Assuming vendor.[hash].css (CSS from npm packages) changes less often than my app.[hash].css, thus could be cached longer on webserver as I made changes to my app’s CSS.

To enable generation of vendor.[hash].css, edit build/webpack.prod.conf.js in your project directory.

Observer // EDIT: comment for changes.

...
const webpackConfig = merge(baseWebpackConfig, {
  ...
  plugins: [
    ...
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          // EDIT: Enable vendor.css as well
          /\.(js|css|sass|scss|less)$/.test(module.resource) &&
          // /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }
    }),
    ...
  ]
})    
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.