Webpack 2配置樹抖動和延遲加載與System.import React項目

Question

我是新來的webpack 2，它的延遲加載，到目前爲止我已經創建項目沒有延遲加載和代碼拆分，但現在想分裂我的代碼分成塊並使用React Router使用系統導入。我已根據this文章創建了React Router部分文章

此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創建只有兩個文件，供應商和捆綁，捆綁的大小沒有減少後，我分開React和React DOM。

這是我的路線。

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配置爲我的應用程序的性能！ 非常感謝，如果有什麼是無稽之談，因爲我是webpack的新手。

Answer 1

Webpack2從System.import（）切換到import（）以匹配當前建議的JavaScript功能。現在在stage3中。

所以，你應該能夠改變你的WebPack配置包括STAGE-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); 
    } 
    } 
] 
}; 

請參閱這裏的webpack2幫助頁面，瞭解有關使用導入進行代碼分割和延遲加載的完整文檔。 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