Webpack创建包含小项目的大文件
Webpack创建包含小项目的大文件
提问于 2015-06-25 10:48:14
我让我的webpack生成了一个很大的main.js文件(1.7mb)，其中有一个小项目，大约20-30个文件，每个文件不超过100行。所需的依赖项在数量上很少(React，Fluxible)，并且我正在使用我能理解的每一个优化插件：
module.exports = {
output: {
path: './build',
publicPath: '/public/',
filename: '[name].js'
},
debug: false,
devtool: 'eval',
target: 'web',
entry: [
'bootstrap-sass!./bootstrap-sass.config.js',
'./client.js',
],
stats: {
colors: true,
reasons: false
},
resolve: {
extensions: ['', '.js'],
alias: {
'styles': __dirname + '/src/styles',
'components': __dirname + '/src/scripts/components',
'actions': __dirname + '/src/scripts/actions',
'stores': __dirname + '/src/scripts/stores',
'constants': __dirname + '/src/scripts/constants',
'mixins': __dirname + '/src/scripts/mixins',
'configs': __dirname + '/src/scripts/configs',
'utils': __dirname + '/src/scripts/utils'
}
},
module: {
loaders: [
{ test: /\.css$/, loader: 'style!css' },
{ test: /\.js$/, exclude: /node_modules/, loader: require.resolve('babel-loader') },
{ test: /\.json$/, loader: 'json-loader'},
{ test: /\.(png|svg|jpg)$/, loader: 'url-loader?limit=8192' },
{ test: /\.(ttf|eot|svg|woff|woff(2))(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url?name=/[name].[ext]"},
{ test: /\.scss$/,
loader: ExtractTextPlugin.extract('style-loader',
'css!sass?outputStyle=expanded&' +
"includePaths[]=" +
(path.resolve(__dirname, "./node_modules"))
)
}
]
},
plugins: [
new webpack.NoErrorsPlugin(),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"windows.jQuery": "jquery"
}),
new ExtractTextPlugin("[name].css", {allChunks: true}),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.AggressiveMergingPlugin()
],
};我做错了什么，或者我可以在哪里进一步改善文件的大小？
回答 2
Stack Overflow用户
发布于 2015-06-25 13:47:33
您应该至少设置
plugins: [
new webpack.DefinePlugin({
'process.env': {
// This has effect on the react lib size
'NODE_ENV': JSON.stringify('production'),
}
}),
...
],这将对React有很大帮助。
此外，在生产环境中，最好将devtool设置为source-map。有关详细信息，请参阅official documentation。
您可以尝试使用the analyse tool检查输出。要获得它期望的JSON，您需要执行类似于webpack --json > stats.json的操作，然后将该stats.json传递给该工具。这可能会给你一些洞察。
Stack Overflow用户
发布于 2016-10-26 13:23:06
你也可以看看Webpack Bundle Analyzer。
它将捆绑包内容表示为方便、交互式、可缩放的树状地图。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31040379
复制相关文章
相似问题