Question

我创建了一个基于Webpack的应用程序。现在我想部署应用程序。这意味着我想为生产创建一个bundle.js。

最好的方法是什么？我已经通过设置参数--optimize-minimize和-p来尝试这个。仍然bundle.js有近2M，这使得网站加载速度很慢。

此外，我想摆脱bundle.js并用一些amd模块替换它。

我的节点依赖项是： "devDependencies": { "babel-core": "6.9.0", "babel-eslint": "5.0.4", "babel-loader": "^6.2.4", "babel-preset-es2015": "6.9.0", "babel-preset-react": "^6.5.0", "babel-preset-stage-0": "^6.5.0", "bootstrap-loader": "^1.0.10", "bootstrap-webpack": "^0.0.5", "css-loader": "^0.23.1", "eslint": "2.10.2", "eslint-plugin-react": "4.3.0", "exports-loader": "^0.6.3", "expose": "^0.1.4", "extract-text-webpack-plugin": "^1.0.1", "file-loader": "^0.8.5", "imports-loader": "^0.6.5", "less-loader": "2.2.3", "node-sass": "3.7.0", "react-hot-loader": "^1.3.0", "resolve-url-loader": "^1.4.3", "sass-loader": "^3.2.0", "style-loader": "0.13.1", "url-loader": "^0.5.7", "webpack": "1.13.0", "webpack-dev-server": "^1.14.1" }, "dependencies": { "react-router": "^2.1.1", "react": "^0.14.7", "react-dom": "^0.14.7", "jquery": "^2.2.2", "less": "^2.6.1", "flux": "^2.1.1", "font-awesome": "^4.5.0", "electron-prebuilt": "^0.36.11", "bootstrap": "^3.3.6", "font-awesome-webpack": "^0.0.4", "fs": "^0.0.2", "react-dropzone": "^3.3.2" }

Answer 1

如果要最小化传出捆绑文件的大小，则需要添加一些插件。这两个插件大大减小了尺寸。

此外，请务必禁用为捆绑添加一些额外大小的源映射。

您还可以将这些行添加到插件配置中：

...
new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify('production')
}),
...

这告诉webpack您处于生产模式：此信息可能随后被框架/库用于不同的行为（例如禁用日志记录）。

Answer 2

不确定bundle.js是由

组成的

如果您还没有尝试过，那么您可以尝试以下这些

分隔库和插件文件。这称为bundle splitting

例如，您可以输入：

{
    app: PATHS.app,
    vendor: ['jquery','angular']
   }

您还可以查看Setting environment variable

Answer 3

Webpack插件：

plugins: [
    new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        }
    })
]

Answer 4

bundle.js变得如此之大，因为webpack包含了所有图像。要防止webpack执行此操作，您必须将加载程序更改为：

{ test: /\.(jpg|png)$/, loader: 'url?limit=25000', include: PATHS.images }

欲了解更多信息，请阅读： http://survivejs.com/webpack/loading-assets/loading-images/

如何缩小webpack包？

4 个答案: