wip: dynamic imports for code-splitting

package.json

@@ -3,14 +3,14 @@
   "version": "1.1.0",
   "description": "Extendable file viewer for web",
   "main": "dist/index.js",
-  "module": "dist/index.js",
+  "module": "dist-es/index.js",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/plangrid/react-file-viewer.git"
   },
   "scripts": {
     "dev": "webpack -d --watch",
-    "build": "webpack -p --progress",
+    "build": "webpack -p --progress --profile --json > stats.json",
     "start": "node ./scripts/start.js",
     "lint": "node_modules/.bin/eslint ./src/**/*.jsx",
     "test": "node_modules/.bin/jest --env=jsdom --watch",
@@ -41,6 +41,7 @@
   "devDependencies": {
     "autoprefixer": "^7.1.0",
     "babel-core": "^6.24.1",
+    "babel-eslint": "^10.0.3",
     "babel-jest": "^20.0.3",
     "babel-loader": "^7.0.0",
     "babel-plugin-transform-class-properties": "^6.19.0",
@@ -75,9 +76,11 @@
     "style-loader": "^0.17.0",
     "url-loader": "^0.5.8",
     "webpack": "^2.5.1",
+    "webpack-bundle-analyzer": "^3.6.0",
     "webpack-dev-server": "^2.4.5"
   },
   "dependencies": {
+    "@loadable/component": "^5.10.3",
     "comma-separated-values": "^3.6.4",
     "mammoth": "1.3.6",
     "pdfjs-dist": "1.8.357",
@@ -112,6 +115,7 @@
   },
   "eslintConfig": {
     "extends": "airbnb",
+    "parser": "babel-eslint",
     "plugins": [
       "import"
     ],

src/components/file-viewer.jsx

@@ -5,17 +5,23 @@ import PropTypes from 'prop-types';
 import 'styles/main.scss';
 import withFetching from './fetch-wrapper';
 
-import {
-  CsvViewer,
-  DocxViewer,
-  VideoViewer,
-  XlsxViewer,
-  XBimViewer,
-  PDFViewer,
-  UnsupportedViewer,
-  PhotoViewerWrapper,
-  AudioViewer,
-} from './drivers';
+import loadable from '@loadable/component';
+
+const CsvViewer = loadable(() => import('./drivers/csv-viewer'));
+const Photo360Viewer = loadable(() => import('./drivers/photo360-viewer'));
+const PDFViewer = loadable(() => import('./drivers/pdf-viewer'));
+const DocxViewer = loadable(() => import('./drivers/docx-viewer'));
+const VideoViewer = loadable(() => import('./drivers/video-viewer'));
+const XlsxViewer = loadable(() => import('./drivers/xlsx-viewer'));
+const XBimViewer = loadable(() => import('./drivers/xbim-viewer'));
+const UnsupportedViewer = loadable(() =>
+  import('./drivers/unsupported-viewer'),
+);
+const PhotoViewer = loadable(() => import('./drivers/photo-viewer'));
+const PhotoViewerWrapper = loadable(() =>
+  import('./drivers/photo-viewer-wrapper'),
+);
+const AudioViewer = loadable(() => import('./drivers/audio-viewer'));
 
 class FileViewer extends Component {
   constructor(props) {
@@ -38,7 +44,9 @@ class FileViewer extends Component {
         return withFetching(CsvViewer, this.props);
       }
       case 'xlsx': {
-        const newProps = Object.assign({}, this.props, { responseType: 'arraybuffer' });
+        const newProps = Object.assign({}, this.props, {
+          responseType: 'arraybuffer',
+        });
         return withFetching(XlsxViewer, newProps);
       }
       case 'jpg':
@@ -75,7 +83,11 @@ class FileViewer extends Component {
     return (
       <div className="pg-viewer-wrapper">
         <div className="pg-viewer" id="pg-viewer">
-          <Driver {...this.props} width={this.state.width} height={this.state.height} />
+          <Driver
+            {...this.props}
+            width={this.state.width}
+            height={this.state.height}
+          />
         </div>
       </div>
     );

webpack.config.js

@@ -35,6 +35,7 @@ const config = {
         amd: 'react-dom',
       },
     },
+    '@loadable/component',
   ],
   module: {
     rules: [
@@ -61,11 +62,7 @@ const config = {
               ident: 'postcss',
               plugins: () => [
                 autoprefixer({
-                  browsers: [
-                    '>1%',
-                    'last 4 versions',
-                    'not ie < 9',
-                  ],
+                  browsers: ['>1%', 'last 4 versions', 'not ie < 9'],
                 }),
               ],
             },