reactjs – 在React项目上使用System.import进行树抖动和延迟加

发布时间：2020-12-15 20:11:15 所属栏目：百科来源：网络整理

导读：我是webpack 2的新手并且它是延迟加载的,到目前为止我已经创建了没有延迟加载和代码拆分的项目,但是现在想要将我的代码拆分成块并使用React Router进行系统导入.我根据 this文章创建了React Router部分这个webpack 2配置文件如下. let webpack = require('w

我是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',minChunks: 2
        })
    ]
}

但是webpack只创建了两个文件,vendor和bundle,在我分离React和React DOM后,bundle的大小也没有减少.

这是我的路线.

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: '*',cb) {
        System.import('./NoMatch')
          .then(loadRoute(cb))
          .catch(errorLoading);
      }
    }
  ]
};

我的应用程序运行,但延迟加载当然不起作用,因为我在System.import中没有我的模块块.

请帮我创建正确的webpack配置以获得我的应用程序的性能！
如果有些事情是无稽之谈,请提前致谢并对不起,因为我是webpack的新手.

解决方法

Webpack2从System.import()切换到import()以匹配当前建议的javascript功能.现在正处于第3阶段.

因此,您应该能够更改您的webpack配置以包含STAGE-3

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

或动态导入插件

{
            test: /.jsx?$/,plugins: [ "transform-runtime","syntax-dynamic-import"]
                }
            }
},

然后改变你的路线

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

有关使用import进行代码拆分和延迟加载的完整文档,请参阅此处的webpack2帮助页面.
https://webpack.js.org/guides/migrating/#code-splitting-with-es2015
https://github.com/tc39/proposal-dynamic-import

要启用Webpack2树摇动,只需要对您的babel设置进行一次更改.

presets: ['es2015',

变

presets: [['es2015',{ modules: false }],

这篇文章是我发现的关于树木的文章：https://medium.freecodecamp.com/tree-shaking-es6-modules-in-webpack-2-1add6672f31b#.lv3ldgfhs

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!