gpt4 book ai didi

reactjs - Webpack 2 配置用于 React 项目上的 System.import 树摇动和延迟加载

转载 作者:行者123 更新时间:2023-12-03 13:36:43 26 4
gpt4 key购买 nike

我是 webpack 2 的新手,它是延迟加载的,到目前为止,我已经创建了没有延迟加载和代码分割的项目,但现在想将我的代码分割成 block 并使用 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 只创建了两个文件,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: '*',
getComponent(location, cb) {
System.import('./NoMatch')
.then(loadRoute(cb))
.catch(errorLoading);
}
}
]
};

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

请帮助我创建正确的 webpack 配置以提高应用程序的性能!提前致谢,如果有什么废话,抱歉,因为我是 webpack 的新手。

最佳答案

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

所以你应该能够更改你的 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 帮助页面,获取有关使用 import 进行代码分割和延迟加载的完整文档。 https://webpack.js.org/guides/migrating/#code-splitting-with-es2015 https://github.com/tc39/proposal-dynamic-import

要启用 Webpack2 tree shake,只需要对 babel 设置进行一项更改。

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

关于reactjs - Webpack 2 配置用于 React 项目上的 System.import 树摇动和延迟加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41911973/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com