Konfiguracja Webpack 2 do drżenia drzewa i leniwego ładowania z System.import w projekcie React

Question

Jestem nowym użytkownikiem Webpack 2 i jest to leniwe ładowanie, do tej pory stworzyłem projekt bez leniwego ładowania i dzielenia kodu, ale teraz chcę podzielić mój kod na porcje i użyj importu systemu z React Router. Stworzyłem część React Router zgodnie z this artykuł

ten plik konfiguracyjny 2 jest poniżej.

let webpack = require('webpack'); 
let path = require('path'); 
let ExtractTextPlugin = require('extract-text-webpack-plugin'); 

var devFlagPlugin = new webpack.DefinePlugin({ 
    __DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false')), 
    'process.env': { 
     NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development'), 
    } 
}); 

let extractSCSS = new ExtractTextPlugin('[name].css') 

module.exports = { 
    context: __dirname, 
    entry: { 
     bundle: './src/app/app-client.jsx', 
     styles: './src/app/sass/main.scss', 
     vendor: [ 
      'react', 'react-dom' 
     ] 
    }, 
    output: { 
     filename: '[name].js', 
     chunkFilename: 'chunk.[id].[chunkhash:8].js', 
     path: './src/build', 
    }, 
    resolve: { 
     extensions: ['.js', '.jsx'] 
    }, 
    devtool: 'cheap-module-source-map', 
    module : { 
     rules : [ 
      { 
       test: /\.scss$/, 
       loader: extractSCSS.extract(['css-loader','sass-loader']) 
      }, 
      { 
       test: /\.jsx?$/, 
       exclude: [/node_modules/, /libs/], 
       use: { 
        loader: "babel-loader", 
        query: { 
         presets: ['es2015', 'react', 'stage-2' ], 
         plugins: [ "transform-runtime" ] 
        } 
       } 
      }, 
      { 
       test: /\.woff2?$|\.ttf$|\.eot$|\.svg$|\.png|\.jpe?g|\.gif$/, 
       use: { 
        loader:'file-loader' 
       } 
      } 
     ] 
    }, 
    plugins: [ 
     extractSCSS, 
     devFlagPlugin, 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: 'bundle', 
      children: true, 
      async: true, 
      minChunks: 2 
     }), 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: 'vendor', 
      children: true, 
      async: true, 
      minChunks: 2 
     }) 
    ] 
} 

ale WebPack tworzy tylko dwa pliki, sprzedawca i paczkę, również wielkość pakietu nie został zredukowany po I i oddzielone React React DOM.

to są moje trasy.

import App from './App.jsx'; 

function errorLoading(err) { 
    console.error('Dynamic page loading failed', err); 
} 

function loadRoute(cb) { 
    return (module) => cb(null, module.default); 
} 

export default { 
    component: App, 
    childRoutes: [ 
    { 
     path: 'stock/info/:symbol(/:tab)', 
     getComponent(location, cb) { 
     System.import('./StockPage') 
      .then(loadRoute(cb)) 
      .catch(errorLoading); 
     } 
    }, 
    { 
     path: '*', 
     getComponent(location, cb) { 
     System.import('./NoMatch') 
      .then(loadRoute(cb)) 
      .catch(errorLoading); 
     } 
    } 
    ] 
}; 

moja aplikacja działa, ale leniwy załadunku nie działa oczywiście, bo nie mam żadnych fragmentów moich modułów wewnątrz System.import.

Proszę, pomóż mi utworzyć właściwą konfigurację webpacka dla wydajności mojej aplikacji! Z góry dziękuję i przepraszam, jeśli coś jest nonsensem, ponieważ jestem nowy w pakiecie sieci Web.

Answer 1

Pakiet Webpack2 został przełączony z System.import() na import() w celu dopasowania do aktualnie proponowanej funkcji javascript. Który jest teraz na etapie 3.

więc powinieneś być w stanie zmienić swoje WebPACK config zawierać STAGE-3

{ 
      test: /\.jsx?$/, 
      exclude: [/node_modules/, /libs/], 
      use: { 
       loader: "babel-loader", 
       query: { 
        presets: ['es2015', 'react', 'stage-2', 'stage-3' ], 
        plugins: [ "transform-runtime" ] 
       } 
      } 
}, 

Lub dynamicznie import plugin

{ 
      test: /\.jsx?$/, 
      exclude: [/node_modules/, /libs/], 
      use: { 
       loader: "babel-loader", 
       query: { 
        presets: ['es2015', 'react', 'stage-2' ], 
        plugins: [ "transform-runtime", "syntax-dynamic-import"] 
       } 
      } 
}, 

następnie zmienić swoje trasy

export default { 
    component: App, 
    childRoutes: [ 
    { 
    path: 'stock/info/:symbol(/:tab)', 
    getComponent(location, cb) { 
     import('./StockPage') 
     .then(loadRoute(cb)) 
     .catch(errorLoading); 
    } 
    }, 
    { 
    path: '*', 
    getComponent(location, cb) { 
    import('./NoMatch') 
     .then(loadRoute(cb)) 
     .catch(errorLoading); 
    } 
    } 
] 
}; 

Zobacz tutaj stronę pomocy dla webpack2, aby uzyskać pełne dokumenty dotyczące używania funkcji importowania do dzielenia kodu i leniwego ładowania. https://webpack.js.org/guides/migrating/#code-splitting-with-es2015 https://github.com/tc39/proposal-dynamic-import

Aby włączyć Webpack2 drzewo potrząsanie który tylko wymaga dokonania jednej zmiany konfiguracji Babel.

presets: ['es2015', 'react', 'stage-2' ], 

staje

presets: [['es2015', { modules: false }], 'react', 'stage-2' ], 

To jest artykuł, że dowiedział się o treeshaking od: https://medium.freecodecamp.com/tree-shaking-es6-modules-in-webpack-2-1add6672f31b#.lv3ldgfhs