search

harlan-zw / nuxt-webpack-optimisations

Make your Nuxt.js webpack builds faster ⚡
269 stars 8 forks source link

Experimental And Safe don't change anything #11

Closed joffreyBerrier closed 3 years ago

joffreyBerrier commented 3 years ago

Describe the bug

I have BootstrapVue on my project, but I am trying to remove it, the gain after removing is ~ 15 second

Without your module :

With your module : (safe / experimental)

With your module : (risky)

=> Second time (thanks to the cache)

✔ Client
  Compiled successfully in 9.90s
✔ Server
  Compiled successfully in 1.96s

To Reproduce My nuxt.config.js

import { sitemapRoutes } from './sitemapRoutes'
const isDeveloppement = !['production', 'staging'].includes(
  process.env.ENVIRONMENT
)

if (process.env.NODE_ENV !== 'production') require('dotenv').config()

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: process.env.SITE_NAME,
    titleTemplate: `%s | ${process.env.SITE_NAME}`,
    meta: [
      { charset: 'utf-8' },
      { content: 'IE=edge,chrome=1', 'http-equiv': 'X-UA-Compatible' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Meta description' }
    ],
    link: [
      { rel: 'shortcut icon', type: 'image/x-icon', href: '/favicon.png' },
      {
        rel: 'apple-touch-icon',
        type: 'image/x-icon',
        href: '/touch_icon.png'
      },
      {
        rel: 'stylesheet',
        href: process.env.ICOMOON_CDN
      }
    ],
    script: [
      {
        src:
          '//cdn.mouseflow.com/projects/****.js',
        defer: true
      },
      {
        src: 'https://js.stripe.com/v3/',
        defer: true
      }
    ]
  },

  // Auto import components
  components: true,

  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },

  /*
  ** Global CSS
  */
  css: ['@/assets/styles/app.sass'],

  /*
  ** Environment variables
  */
  env: {
    action_cable_websocket_url: process.env.ACTION_CABLE_WEBSOCKET_URL,
    algolia_id: process.env.ALGOLIA_ID,
    algolia_index_prefix: process.env.ALGOLIA_INDEX_PREFIX,
    algolia_search_key: process.env.ALGOLIA_SEARCH_KEY,
    api_host: process.env.API_HOST,
    api_port: process.env.API_PORT,
    api_prefix: process.env.API_PREFIX,
    app_domain: process.env.APP_DOMAIN,
    base_url: process.env.BASE_URL,
    browser_language: process.env.BROWSER_LANGUAGE,
    collection_ids: process.env.COLLECTION_IDS,
    collectionist_phone_be: process.env.COLLECTIONIST_PHONE_BE,
    collectionist_phone_ch: process.env.COLLECTIONIST_PHONE_CH,
    collectionist_phone_fr: process.env.COLLECTIONIST_PHONE_FR,
    collectionist_phone_gb: process.env.COLLECTIONIST_PHONE_GB,
    environment: process.env.ENVIRONMENT,
    http_password: process.env.HTTP_PASSWORD,
    http_username: process.env.HTTP_USERNAME,
    img_cdn_domain: process.env.IMG_CDN_DOMAIN,
    node_env: process.env.NODE_ENV,
    segment_token: process.env.SEGMENT_TOKEN,
    signatureui_en: process.env.SIGNATUREUI_EN,
    signatureui_fr: process.env.SIGNATUREUI_FR,
    site_name: process.env.SITE_NAME,
    stripe_public_key: process.env.STRIPE_PUBLIC_KEY,
    twitter: process.env.TWITTER,
    yousign_api_key: process.env.YOUSIGN_API_KEY
  },

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    { src: '~plugins/api.js' },
    { src: '~plugins/breakpointChecker.js' },
    { src: '~plugins/browserLanguage' },
    { src: '~plugins/getWishlistToken.js' },
    { src: '~plugins/veeValidate.js' },
    { src: '~plugins/vueScrollto' },
    { src: '~plugins/vueTouchEvents.js' },
    { src: '~plugins/stripe.server.js' },
    { src: '~plugins/actioncableVue.client.js' },
    { src: '~plugins/analytics.client.js' },
    { src: '~plugins/aos.client.js' },
    { src: '~plugins/carousel.client.js' },
    { src: '~plugins/lazysizes.client.js' },
    { src: '~plugins/tracking.client.js' },
    { src: '~plugins/vueCookieLaw.client.js' }
  ],

  serverMiddleware: isDeveloppement
    ? []
    : ['~/serverMiddleware/rateLimiter', '~/serverMiddleware/redirect'],

  /*
  ** Nuxt.js build modules
  */
  buildModules: [
    '@nuxtjs/tailwindcss',
    '@nuxtjs/device',
    'nuxt-build-optimisations'
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
    '@nuxtjs/dayjs',
    'nuxt-basic-auth-module', // authentication on staging
    // Doc: https://auth.nuxtjs.org/
    '@nuxtjs/auth', // user account authentication
    // Doc: https://github.com/nuxt-community/axios-module#usage
    '@nuxtjs/axios',
    // Doc: https://bootstrap-vue.js.org/docs/
    'bootstrap-vue/nuxt',
    // Doc: https://nuxt-community.github.io/nuxt-i18n/
    [
      'nuxt-i18n',
      {
        baseUrl: process.env.BASE_URL,
        locales: [
          { code: 'fr', iso: 'fr-FR', name: 'fr', file: 'fr.js' },
          { code: 'en', iso: 'en-US', name: 'en', file: 'en.js' }
        ],
        strategy: 'prefix',
        defaultLocale: 'fr',
        rootRedirect: 'fr',
        seo: false,
        lazy: true,
        langDir: 'lang/',
        detectBrowserLanguage: false
      }
    ],
    'cookie-universal-nuxt',
    [
      '~/modules/bugsnag',
      {
        browserApiKey: process.env.BUGSNAG_CLIENT_API_KEY,
        serverApiKey: process.env.BUGSNAG_SERVER_API_KEY,
        bugsnagOptions: {
          enabledReleaseStages: ['production', 'staging'],
          releaseStage: process.env.APP_DOMAIN
        }
      }
    ],
    '@nuxtjs/sitemap'
  ],
  sitemap: {
    hostname: `${process.env.BASE_URL}`,
    gzip: true,
    cacheTime: 1,
    defaults: {
      changefreq: 'monthly',
      lastmod: new Date()
    },
    exclude: process.env.SITEMAP_EXCLUDE_URL.split(','),
    routes: async () => sitemapRoutes()
  },
  dayjs: {
    locales: ['en', 'fr'],
    defaultLocale: 'fr',
    plugins: ['isBetween']
  },
  bootstrapVue: {
    icons: false,
    bvCSS: false,
    css: false,
    components: ['BCol'],
    componentPlugins: ['BVToastPlugin']
  },
  basic: {
    name: process.env.HTTP_USERNAME,
    pass: process.env.HTTP_PASSWORD,
    enabled: process.env.ENVIRONMENT === 'staging'
  },
  /*
  ** Auth module configuration
  */
  auth: {
    plugins: ['~/plugins/auth.js'],
    redirect: {
      // in plugins/auth.js, we use i18n with 'name' provided here:
      login: 'login',
      logout: 'login',
      callback: 'login',
      home: 'myaccount-profile'
    },
    watchLoggedIn: false,
    cookie: {
      prefix: ''
    }
  },
  /*
  ** Axios module configuration
  */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
    proxy: false,
    https: true
  },
  /*
  ** Progress bar
  */
  loading: {
    color: '#dbbc8f',
    failedColor: '#dbbc8f',
    height: '4px'
  },
  tailwindcss: {
    cssPath: '~/assets/styles/tailwind.sass'
  },
  /*
  ** Build configuration
  */

  build: {
    transpile: ['vee-validate/dist/rules'],
    publicPath:
      process.env.NODE_ENV === 'production' ? process.env.CDN_URL : '/_nuxt/',
    // For Bootstrap
    babel: {
      compact: true
    },
    extend(config, ctx) {
      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  }
}

Expected behavior A clear and concise description of what you expected to happen.

Screenshots If applicable, add screenshots to help explain your problem.

Additional context Add any other context about the problem here.

harlan-zw commented 3 years ago

Hi @joffreyBerrier

Thanks for submitting an issue.

I've was able to replicate the performance you're describing using similar modules. As far as I can tell, the big contributing factor is the postcss-loader time, from tailwindcss.

The biggest speed improvement from this module is using esbuild which is enabled on safe-risky modes. If javascript isn't a bottleneck you won't see as big of an improvement.

Risky would give you an improvement because of the thread-loader and hardsource caching. Not a lot further I can do on my end around this as both of these optimisations arer risky, was there an issue using the risky mode?

Looking into this did give me the idea of clearing the postcss-preset-env for local development, which should give a tiny performance boost since it doesn't need to polyfill.

There are a couple of things I'd recommend trying based on your config:

harlan-zw commented 3 years ago

In version 1.1 I plan to add support for swapping out tailwindcss for windicss automatically which gives a significant build time improvement.

appinteractive commented 3 years ago

@harlan-zw as we have tailwind-jit now, windicss should not be needed anymore.

appinteractive commented 3 years ago

I opened a PR as there was a typo in the readme, it stated expiremental instead experimental which might also be an issue if you copy that part directly as it will not change anything.