bundle.js在webpack项目中太大

我正在尝试创建一个react + babel + webpack项目。它的工作原理是，但bundle.js文件大小为950KB。bundle.js在webpack项目中太大

是bundle.js总是那么大？如果不是，我该如何缩小尺寸？

这是我webpack.config.js：

var webpack = require('webpack'); 
var path = require('path'); 

var BUILD_DIR = path.resolve(__dirname, 'src/client/public'); 
var APP_DIR = path.resolve(__dirname, 'src/client/app'); 

var config = { 
entry: APP_DIR + '/index.jsx', 
output: { 
    path: BUILD_DIR, 
    filename: 'bundle.js' 
}, 
plugins: [ 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.DefinePlugin({ 
     'process.env': { 
     'NODE_ENV': JSON.stringify('production') 
     } 
    }), 
    new webpack.optimize.UglifyJsPlugin({ 
     compressor: { 
     warnings: false 
     } 
    }) 
], 
module : { 
    loaders : [ 
     { 
     test : /\.jsx?/, 
     loader : 'babel', 
     query: 
     { 
      presets: ["es2015", 'react'] 
     } 
     } 
    ] 
} 
}; 

module.exports = config;

来源

2016-12-28 Nir Kogman

是的。捆绑将根据您的依赖性增长。 webpack将打包您使用导入的所有依赖关系。另一种方式是在部署时尽可能使用CDN，并使用babel将ES6转换为ES5作为反应组件。 – subash

它总是依赖于你与之捆绑的库。您还可以尝试拆分供应商库和应用程序代码之间的捆绑包。这样，客户端可以缓存供应商，而不必再次下载它。你也可以使用Webpack DLL的方法，在之后分割并加速编译（如果你使用的是像hmr这样的工具） – gretro

它很大程度上取决于您的依赖关系。您可以忽略ie8并重新删除您的依赖项以删除一些kB：

var config = { 
    entry: APP_DIR + '/index.jsx', 
    output: { 
    path: BUILD_DIR, 
    filename: 'bundle.js' 
    }, 
    plugins: [ 
    new webpack.NoErrorsPlugin(), 
    new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }), 
    new webpack.optimize.OccurrenceOrderPlugin(), 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.UglifyJsPlugin({ 
     compress: { 
     screw_ie8: true, 
     warnings: false 
     }, 
     mangle: { 
     screw_ie8: true 
     }, 
     output: { 
     comments: false, 
     screw_ie8: true 
     } 
    }) 
    ] 
};

来源

2016-12-28 16:49:42 Tholle

-1

你总是可以尝试使用JavaScript “缩小” 工具。它压缩优化您的代码。在谷歌搜索javascript minify。

来源

2016-12-28 15:54:24

通常包含很多依赖关系，因此这个大小并不罕见。尝试生成您的软件包时，使用下列标志：

--optimize-minimize - Minifies捆绑

--optimize-occurrence-order - 优化块标识

--optimize-dedupe - 删除重复的代码相同件

更多的话题here。

来源

2016-12-28 16:00:26

bundle.js在webpack项目中太大

回答

相关问题