Webpack打包速度慢的解决方法汇总
5星
- 浏览量: 0
- 大小:None
- 文件类型：PDF
简介：
本文总结了提高Webpack项目构建效率的方法和技巧，帮助开发者快速优化配置、减少加载时间。
解决webpack打包速度慢的问题可以通过以下三种方法来实现：
第一种技巧是正确使用webpack的watch模式。刚开始接触webpack的人可能会频繁地进行编译、测试和更改操作，这会导致工作效率降低，并且让人感觉webpack不好用。实际上，正确的做法是在命令行中直接执行`webpack --watch`指令，这样当文件发生变化时，会自动重新编译项目。虽然初次运行时可能耗时较长，但后续的改动将会迅速完成。
第二种技巧是使用externals忽略公共库。在开发过程中如果发现引入如React或jQuery等大型库后打包后的文件变得很大，可以通过配置webpack的`externals`选项来避免将这些常见的依赖项包含进最终生成的bundle中。例如：
```javascript
externals: {
antd: true,
react: React,
react-dom: ReactDOM
}
```
这样设置之后，在项目代码里直接使用 `require(react)` 或其他库的方式，webpack会忽略这些引用，并且不会将它们打包进最终的文件中。这可以显著减少生成文件的大小。
第三种技巧是利用CommonsChunkPlugin插件处理公共模块。当在某些情况下（例如使用MaterialUI时），可能会遇到重复引入React或其他全局依赖的问题。此时可以通过设置webpack配置中的`entry`和`plugins`来创建一个包含所有共享库的独立文件，比如叫做common.js，并且通过CommonsChunkPlugin确保这个文件不会被多次打包。
具体示例代码如下：
```javascript
entry: {
main: ./appsmain.jsx,
common: [
./node_modules/react/dist/react-with-addons.min.js,
./node_modules/react-dom/dist/react-dom.min.js
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin(common, common.js)
],
output: {
path: path.resolve(containerPath, dist),
filename: [name].js
}
```
同时需要在HTML文件中引入这个`common.js`，确保它只被加载一次：
```html
```
通过以上三种方法可以有效地提升webpack的打包效率。
全部评论 (0)
