move some JS out of the critical path

closes: CORE-2785 This is all stuff that needs to be ran on every page, but It is not critical that it be ran before anything else. By moving this into an async chunk, it will not block any of the critical javascript from running if it is ready (downloaded) before this stuff is. Test plan: * all of these behaviors and things should still run * but you should see that they load from their own webpack chunk file In the network panel * and you should see that while that chunk is downloading, the critical JS is not blocked from executing Change-Id: If47d966979238d68da14bb4b69cba32be7f87dcc Reviewed-on: https://gerrit.instructure.com/189372 Tested-by: Jenkins Reviewed-by: Brent Burgoyne <bburgoyne@instructure.com> QA-Review: Steven Burnett <sburnett@instructure.com> Product-Review: Steven Burnett <sburnett@instructure.com>
2019-04-15 22:50:37 -06:00 · 2019-04-15 22:50:37 -06:00 · 8ca30e3626
parent 5a79f1a361
commit 8ca30e3626
9 changed files with 131 additions and 102 deletions
--- a/app/coffeescripts/registration/incompleteRegistrationWarning.coffee
+++ b/app/coffeescripts/registration/incompleteRegistrationWarning.coffee
@ -1,35 +0,0 @@
-#
-# Copyright (C) 2012 - present Instructure, Inc.
-#
-# This file is part of Canvas.
-#
-# Canvas is free software: you can redistribute it and/or modify it under
-# the terms of the GNU Affero General Public License as published by the Free
-# Software Foundation, version 3 of the License.
-#
-# Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
-# WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
-# A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
-# details.
-#
-# You should have received a copy of the GNU Affero General Public License along
-# with this program. If not, see <http://www.gnu.org/licenses/>.
-
-if ENV.INCOMPLETE_REGISTRATION
-  require [
-    'jquery', 
-    'i18n!registration', 
-    'jst/registration/incompleteRegistrationWarning'
-  ], ($, I18n, template) ->
-
-    $(template(email: ENV.USER_EMAIL)).
-      appendTo($('body')).
-      dialog
-        title: I18n.t('welcome_to_canvas', 'Welcome to Canvas!')
-        width: 400
-        resizable: false
-        buttons: [
-          text: I18n.t('get_started', 'Get Started')
-          click: -> $(this).dialog('close')
-          class: 'btn-primary'
-        ]
--- a/app/coffeescripts/registration/incompleteRegistrationWarning.js
+++ b/app/coffeescripts/registration/incompleteRegistrationWarning.js
@ -0,0 +1,39 @@
+//
+// Copyright (C) 2012 - present Instructure, Inc.
+//
+// This file is part of Canvas.
+//
+// Canvas is free software: you can redistribute it and/or modify it under
+// the terms of the GNU Affero General Public License as published by the Free
+// Software Foundation, version 3 of the License.
+//
+// Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+// WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+// A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+// details.
+//
+// You should have received a copy of the GNU Affero General Public License along
+// with this program. If not, see <http://www.gnu.org/licenses/>.
+
+import $ from 'jquery'
+import I18n from 'i18n!incompleteregistration'
+import template from 'jst/registration/incompleteRegistrationWarning'
+
+if (ENV.INCOMPLETE_REGISTRATION) {
+  $(template({email: ENV.USER_EMAIL}))
+    .appendTo($('body'))
+    .dialog({
+      title: I18n.t('welcome_to_canvas', 'Welcome to Canvas!'),
+      width: 400,
+      resizable: false,
+      buttons: [
+        {
+          text: I18n.t('get_started', 'Get Started'),
+          click() {
+            $(this).dialog('close')
+          },
+          class: 'btn-primary'
+        }
+      ]
+    })
+}
--- a/app/coffeescripts/views/DraggableCollectionView.coffee
+++ b/app/coffeescripts/views/DraggableCollectionView.coffee
@ -20,6 +20,7 @@ define [
  'jquery'
  'underscore'
  './CollectionView'
+  'jqueryui/sortable'
 ], (Backbone, $, _, CollectionView) ->

  class DraggableCollectionView extends CollectionView
--- a/app/coffeescripts/views/SortableCollectionView.coffee
+++ b/app/coffeescripts/views/SortableCollectionView.coffee
@ -20,6 +20,7 @@ define [
  'jquery'
  'underscore'
  './CollectionView'
+  'jqueryui/sortable'
 ], (Backbone, $, _, CollectionView) ->

  class SortableCollectionView extends CollectionView
--- a/app/jsx/bundles/common.js
+++ b/app/jsx/bundles/common.js
@ -18,45 +18,26 @@

 // true modules that we use in this file
 import $ from 'jquery'
-import _ from 'underscore'
 import Backbone from 'Backbone'
-import updateSubnavMenuToggle from '../subnav_menu/updateSubnavMenuToggle'
 import splitAssetString from 'compiled/str/splitAssetString'
 import {isMathMLOnPage, loadMathJax} from 'mathml'
-import setupCSP from '../account_settings/alert_enforcement'
+import preventDefault from 'compiled/fn/preventDefault'

-// modules that do their own thing on every page that simply need to be required
+// these are all things that either define global $.whatever or $.fn.blah
+// methods or set something up that other code expects to exist at runtime.
+// so they have to be ran before any other app code runs.
 import 'translations/_core_en'
 import 'jquery.ajaxJSON'
-import 'jquery.google-analytics'
-import 'reminders'
 import 'jquery.instructure_forms'
-import 'instructure'
 import 'ajax_errors'
-import 'page_views'
-import 'compiled/behaviors/authenticity_token'
-import 'compiled/behaviors/ujsLinks'
-import 'compiled/behaviors/admin-links'
 import 'compiled/behaviors/activate'
-import 'compiled/behaviors/elementToggler'
 import 'compiled/behaviors/tooltip'
-import 'compiled/behaviors/ic-super-toggle'
-import 'compiled/behaviors/instructure_inline_media_comment'
-import 'compiled/behaviors/ping'
-import 'compiled/behaviors/broken-images'
-import 'LtiThumbnailLauncher'
-
-// Other stuff several bundles use.
-// If any of these really arn't used on most pages,
-// we should remove them from this list, since this
-// loads them on every page
 import 'media_comments'
-import 'jqueryui/effects/drop'
-import 'jqueryui/progressbar'
-import 'jqueryui/tabs'
-import 'compiled/registration/incompleteRegistrationWarning'
-import 'moment'

+
+import('../runOnEveryPageButDontBlockAnythingElse')
+if (ENV.csp) import('../account_settings/alert_enforcement').then(setupCSP => setupCSP(window.document))
+if (ENV.INCOMPLETE_REGISTRATION) import('compiled/registration/incompleteRegistrationWarning')
 if (ENV.badge_counts) import('compiled/badge_counts')

 $('html').removeClass('scripts-not-loaded')
@ -69,44 +50,11 @@ $('.help_dialog_trigger').click((event) => {
  }, 'helpDialogAsyncChunk')
 })

-$('#skip_navigation_link').on('click', function (event) {
-  // preventDefault so we dont change the hash
-  // this will make nested apps that use the hash happy
-  event.preventDefault()
-  $($(this).attr('href')).attr('tabindex', -1).focus()
-})
-
-// show and hide the courses vertical menu when the user clicks the hamburger button
-// This was in the courses bundle, but it sometimes needs to work in places that don't
-// load that bundle.
-const WIDE_BREAKPOINT = 1200
-
-function resetMenuItemTabIndexes () {
-  // in testing this, it seems that $(document).width() returns 15px less than what it should.
-  const tabIndex = (
-    $('body').hasClass('course-menu-expanded') ||
-    $(document).width() >= WIDE_BREAKPOINT - 15
-  ) ? 0 : -1
-  $('#section-tabs li a').attr('tabIndex', tabIndex)
-}
-
-$(resetMenuItemTabIndexes)
-$(window).on('resize', _.debounce(resetMenuItemTabIndexes, 50))
-$('body').on('click', '#courseMenuToggle', () => {
-  $('body').toggleClass('course-menu-expanded')
-  updateSubnavMenuToggle()
-  $('#left-side').css({
-    display: $('body').hasClass('course-menu-expanded') ? 'block' : 'none'
-  })
-
-  resetMenuItemTabIndexes()
-})

 // Backbone routes
-$('body').on('click', '[data-pushstate]', function (event) {
-  event.preventDefault()
+$('body').on('click', '[data-pushstate]', preventDefault(() => {
  Backbone.history.navigate($(this).attr('href'), true)
-})
+}))

 if (
  window.ENV.NEW_USER_TUTORIALS &&
@ -129,9 +77,6 @@ if (!supportsCSSVars) {
  }, 'canvasCssVariablesPolyfill')
 }

-
-
 $(() => {
  if (isMathMLOnPage()) loadMathJax('TeX-MML-AM_HTMLorMML')
-  setupCSP(window.document);
 })
--- a/app/jsx/runOnEveryPageButDontBlockAnythingElse.js
+++ b/app/jsx/runOnEveryPageButDontBlockAnythingElse.js
@ -0,0 +1,79 @@
+/*
+ * Copyright (C) 2019 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+// code in this file is stuff that needs to run on every page but that should
+// not block anything else from loading. It will be loaded by webpack as an
+// async chunk so it will always be loaded eventually, but not necessarily before
+// any other js_bundle code runs. and by moving it into an async chunk,
+// the critical code to display a page will be executed sooner
+
+import _ from 'underscore'
+import $ from 'jquery'
+import updateSubnavMenuToggle from './subnav_menu/updateSubnavMenuToggle'
+import preventDefault from 'compiled/fn/preventDefault'
+
+// modules that do their own thing on every page that simply need to be required
+import 'reminders'
+import 'instructure'
+import 'page_views'
+import 'compiled/behaviors/authenticity_token'
+import 'compiled/behaviors/ujsLinks'
+import 'compiled/behaviors/admin-links'
+import 'compiled/behaviors/elementToggler'
+import 'compiled/behaviors/ic-super-toggle'
+import 'compiled/behaviors/instructure_inline_media_comment'
+import 'compiled/behaviors/ping'
+import 'compiled/behaviors/broken-images'
+import 'LtiThumbnailLauncher'
+
+// preventDefault so we dont change the hash
+// this will make nested apps that use the hash happy
+$('#skip_navigation_link').on(
+  'click',
+  preventDefault(() => {
+    $($(this).attr('href'))
+      .attr('tabindex', -1)
+      .focus()
+  })
+)
+
+// show and hide the courses vertical menu when the user clicks the hamburger button
+// This was in the courses bundle, but it sometimes needs to work in places that don't
+// load that bundle.
+const WIDE_BREAKPOINT = 1200
+
+function resetMenuItemTabIndexes() {
+  // in testing this, it seems that $(document).width() returns 15px less than what it should.
+  const tabIndex =
+    $('body').hasClass('course-menu-expanded') || $(document).width() >= WIDE_BREAKPOINT - 15
+      ? 0
+      : -1
+  $('#section-tabs li a').attr('tabIndex', tabIndex)
+}
+
+$(resetMenuItemTabIndexes)
+$(window).on('resize', _.debounce(resetMenuItemTabIndexes, 50))
+$('body').on('click', '#courseMenuToggle', () => {
+  $('body').toggleClass('course-menu-expanded')
+  updateSubnavMenuToggle()
+  $('#left-side').css({
+    display: $('body').hasClass('course-menu-expanded') ? 'block' : 'none'
+  })
+
+  resetMenuItemTabIndexes()
+})
--- a/frontend_build/modulesToIncludeInVendorBundle.js
+++ b/frontend_build/modulesToIncludeInVendorBundle.js
@ -57,7 +57,6 @@ module.exports = [
  'jquery.instructure_misc_helpers',
  'jquery.loadingImg',
  'compiled/str/i18nLolcalize',
-  'instructure',

  // 'jsx/shared/rce/RichContentEditor'
  'lodash',
--- a/public/javascripts/instructure.js
+++ b/public/javascripts/instructure.js
@ -22,7 +22,6 @@ import I18n from 'i18n!instructure'
 import $ from 'jquery'
 import _ from 'underscore'
 import tz from 'timezone'
-import userSettings from 'compiled/userSettings'
 import htmlEscape from './str/htmlEscape'
 import preventDefault from 'compiled/fn/preventDefault'
 import RichContentEditor from 'jsx/shared/rce/RichContentEditor'
--- a/public/javascripts/vendor/slickgrid/slick.grid.js
+++ b/public/javascripts/vendor/slickgrid/slick.grid.js
@ -26,6 +26,7 @@ import 'vendor/slickgrid/slick.core'
 import 'vendor/slickgrid/lib/jquery.event.drag-2.2'
 import {isRTL} from 'jsx/shared/helpers/rtlHelper'
 import {getNormalizedScrollLeft, setNormalizedScrollLeft} from 'normalize-scroll-left'
+import 'jqueryui/sortable'

 /*
 * These eslint configurations are just becase that's how this file was