[英]ReactJS - What makes bundle.js size big
我最近在ReactJS上完成了一個項目,該項目的唯一問題是其生產bundle.js大小約為30MB ,這真是太龐大了。 我已經使用BundleAnalyzerPlugin插件對其進行了分析,看起來像這樣
塊越大,大小越大。
node_modules = 10 MB, 每個可見的小塊幾乎 = 1MB
我的webpack配置看起來像這樣
webpack.base.config.js
var webpack = require('webpack');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
entry: [
'./src/index.js'
],
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
noParse:[
'./~/xlsx/jszip.js',
],
externals:[
{'./jszip': 'jszip'}
],
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['react', 'es2015', 'stage-1']
}
},
{
test: /\.json$/,
loader: "json-loader"
},
{
test: /\.(html)$/,
loader: "html-loader",
options:{
attrs:[':data-src!./src/components/preview/preview_html',':data-src!./src/components/landing/loader/index.html']
}
},
{
test: /\.(ttf|gif|eot|svg|woff|woff2|png)(\?.+)?$/,
loader: 'file-loader?name=[hash:12].[ext]'
},
{
test: /\.css?$/,
loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
},
{
test: /\.scss?$/,
loader: 'style-loader!css-loader!sass-loader'
}]
},
resolve: {
root: __dirname,
alias:{
//Have set of aliases
},
extensions: ['','.json', '.js', '.jsx','.ejs']
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery"
}),
new BundleAnalyzerPlugin()
],
devServer: {
historyApiFallback: true,
contentBase: './',
watchContentBase: true,
},
devtool:'cheap-module-eval-source-map'
};
webpack.prod.config.js
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.config.js');
var webpack = require('webpack');
var CompressionPlugin = require('compression-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = merge(baseConfig,{
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new HtmlWebpackPlugin({
template:'index.ejs',
hash: false,
baseHref: 'xxxx',
scripts: [
{
src: 'bundle.js',
type: 'text/javascript'
}
]
})
]
});
我直接從node_modules導入了一些CSS到index.ejs文件中,如下所示
<link rel="stylesheet" href="/node_modules/react-bootstrap-switch/dist/css/bootstrap3/react-bootstrap-switch.css">
<link rel="stylesheet" href="/node_modules/draft-js/dist/Draft.css">
<link rel="stylesheet" href="/node_modules/react-select-plus/dist/react-select-plus.css">
<link rel="stylesheet" href="/node_modules/react-day-picker/lib/style.css">
<link rel="stylesheet" href="/node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css">
<script src="node_modules/xlsx/dist/shim.min.js"></script>
<script src="node_modules/xlsx/dist/xlsx.full.min.js"></script>
需要幫助以減小大小,並發現配置或實現中的錯誤。
謝謝。
我假設您使用的是webpack4。我注意到您尚未設置mode: 'production'
生產Webpack配置中為mode: 'production'
。 該選項將進行優化,包括使用terser
最小化包輸出。 同樣,將NODE_ENV設置為production
,某些庫直接依賴於該變量的值。
我建議從此開始,並閱讀以下內容: https : //webpack.js.org/guides/production/
完成此操作后,您可以開始確定供應商捆綁包中哪些第三方模塊占用的空間最大。 然后,您可以考慮對它們進行代碼拆分,以便它們將位於各自獨立的塊中,並且僅在需要時才可以加載它們。 您可以在這里閱讀有關代碼拆分的信息: https : //webpack.js.org/guides/code-splitting/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.