Reduce File Size

WEAVV CSS file includes all CSS classes which increasing the file size estimate up to 8MB after being generated with the below command. This giving a full experience when prototyping new UI. For production-ready the best idea is to shrink the CSS file size down and left only CSS classes that are used by the project, thus vastly increasing the load time performance on the web browser.

# full version
$ npm run build-full
# minimal version
$ npm run build-min

Using PurgeCSS to strip down unused CSS classes in WEAVV without worrying about the file size. Below is an example setting of PurgeCSS using Gulp in the gulpfile.js file.

// Example Snippet
const purgeCss = require('gulp-purgecss')
gulp.task('purge-css', () => {
return gulp.src('./node-modules/weavvcss/dist/weavv-x.x.x.min.css')
  .pipe(purgeCss({
      content: [
        'src/views/**/**/*.html',
        'src/views/**/**/*.js',
        'src/views/**/**/*.vue'
      ],
      defaultExtractor: content => content.match(/[w-/:()]+(?<!:)/g) || [],
      // add whitelisting e.g. '/-webkit-scrollbar-thumb$/'
      whitelistPatterns: []
  }))
  .pipe(rename('style.css'))
  .pipe(gulp.dest('dist/assets/css'))
})

Optionally to use the dedicated scaffolding app to create a new project with PurgeCSS on the go.

$ npx weavv-cli my-new-project

Read guide to Create Empty Project yourself without using the WEAVV CLI.