Webpack 2 पर ट्री मिलाते हुए और System.import साथ आलसी लोड करने के लिए विन्यास प्रतिक्रिया परियोजना

Question

मैं webpack 2 करने के लिए नया हूँ और यह आलसी लोड हो रहा है है, अब तक मैं आलसी लोड हो रहा है और कोड बंटवारे के बिना प्रोजेक्ट बनाया हुआ है, लेकिन अब मेरी कोड विभाजित करना चाहते हैं भाग में और रिएक्ट राउटर के साथ सिस्टम आयात का उपयोग करें। मैं बनाया है this लेख

इस webpack 2 कॉन्फ़िग फ़ाइल के नीचे है के अनुसार रूटर हिस्सा प्रतिक्रिया।

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 
     }) 
    ] 
} 

लेकिन webpack केवल दो फ़ाइलें, विक्रेता और बंडल, भी बंडल के आकार के बाद मैं अलग प्रतिक्रिया और डोम प्रतिक्रिया कम नहीं है बनाता है।

यह मेरा मार्गों है।

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); 
     } 
    } 
    ] 
}; 

अपने आवेदन चलाता है, लेकिन आलसी लोड हो रहा है निश्चित रूप से काम नहीं करेगा, क्योंकि मैं System.import भीतर मेरे मॉड्यूल का कोई हिस्सा नहीं है।

कृपया सहायता से आप अपने आवेदन के प्रदर्शन के लिए सही webpack config बनाने के लिए! अग्रिम धन्यवाद और क्षमा करें अगर कुछ बकवास है, क्योंकि मैं वेबपैक पर नया हूं।

Answer 1

Webpack2 System.import से बदल()() वर्तमान जावास्क्रिप्ट सुविधा प्रस्तावित मैच के लिए आयात करने के लिए। जो अभी चरण 3 में है।

तो आप अपने webpack config बदलने के लिए चरण-3

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

या गतिशील आयात प्लगइन

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

अपने मार्गों फिर बदल

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); 
    } 
    } 
] 
}; 

शामिल करने के लिए सक्षम होना चाहिए कोड विभाजन और आलसी लोडिंग के लिए आयात का उपयोग करने पर पूर्ण दस्तावेज़ों के लिए यहां वेबपैक 2 सहायता पृष्ठ देखें। https://webpack.js.org/guides/migrating/#code-splitting-with-es2015 https://github.com/tc39/proposal-dynamic-import

Webpack2 पेड़ झटकों जो केवल अपने कोलाहल सेटअप करने के लिए एक परिवर्तन करने की आवश्यकता है सक्षम करने के लिए।

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

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

हो जाता है यह लेख है कि मैं से treeshaking बारे में पता चला है: https://medium.freecodecamp.com/tree-shaking-es6-modules-in-webpack-2-1add6672f31b#.lv3ldgfhs