怎么使用webpack对项目进行优化_前端培训

了解了Loaders和Plugins之后，基本我们就可以搭建一整套基于Webpack的构建。下面让我来介绍一下怎么使用webpack对项目进行优化。

构建优化

1、减少编译体积 ContextReplacementPugin、IgnorePlugin、babel-plugin-import、babel-plugin-transform-runtime。

2、并行编译 happypack、thread-loader、uglifyjsWebpackPlugin开启并行

3、缓存 cache-loader、hard-source-webpack-plugin、uglifyjsWebpackPlugin开启缓存、babel-loader开启缓存

4、预编译 dllWebpackPlugin && DllReferencePlugin、auto-dll-webapck-plugin

性能优化

1、减少编译体积 Tree-shaking、Scope Hositing。

2、hash缓存 webpack-md5-plugin

3、拆包 splitChunksPlugin、import()、require.ensure