implement lazy-loading of components; fixes dynamic imports (#215)

* implement lazy-loading of components; fixes dynamic imports

* Fix merge

Author: Nathan Reid

packages/vue-component/plugin/vue-compiler.js

@@ -151,14 +151,37 @@ VueComponentCompiler = class VueCompo extends CachingCompiler {
 
     //console.log(`js hash: ${jsHash}`);
 
+    // Lazy load files from NPM packages or imports directories
+    const isLazy = !!inputFilePath.match(/(^|\/)(node_modules|imports)\//);
+
+    // Style
+    let css = '';
+    let cssHash = '';
+    if (compileResult.styles.length !== 0) {
+      for (let style of compileResult.styles) {
+        css += style.css;
+      }
+
+      cssHash = Hash(css);
+
+      //console.log(`css hash: ${cssHash}`);
+      if (!isDev && isLazy) {
+        // Wrap CSS in Meteor's lazy CSS loader
+        css = `
+          const modules = require('meteor/modules');
+          modules.addStyles(${JSON.stringify(css)});
+        `;
+      }
+    }
+
     const { js, templateHash } = generateJs(vueId, inputFile, compileResult)
 
-    let outputFilePath = inputFile.getPathInPackage();
+    let outputFilePath = inputFilePath;
     // Meteor will error when loading .vue files on the server unless they are postfixed with .js
     if (inputFile.getArch().indexOf('os') === 0 && inputFilePath.indexOf('node_modules') !== -1) {
       outputFilePath += '.js';
     }
-
+    
     // Including the source maps for .vue files from node_modules breaks source mapping. 
     const sourceMap = inputFilePath.indexOf('node_modules') === -1
       ? compileResult.map
@@ -167,27 +190,17 @@ VueComponentCompiler = class VueCompo extends CachingCompiler {
     // Add JS Source file
     inputFile.addJavaScript({
       path: outputFilePath,
-      data: js,
+      data: isLazy && !isDev ? css + js : js,
       sourceMap: sourceMap,
-      lazy: false,
+      lazy: isLazy,
     });
 
-    // Style
-    let css = '';
-    let cssHash = '';
-    if (compileResult.styles.length !== 0) {
-      for (let style of compileResult.styles) {
-        css += style.css;
-      }
-
-      cssHash = Hash(css);
-
-      //console.log(`css hash: ${cssHash}`);
-
+    if (css) {
       if (isDev) {
         // Add style to client first-connection style list
         global._dev_server.__addStyle({ hash: vueId, css, path: inputFilePath }, false);
-      } else {
+      } else if (!isLazy) {
+        // In order to avoid lazy-loading errors in --production mode, addStylesheet must come after addJavaScript
         this.addStylesheet(inputFile, {
           data: css
         });