webpack优化

来源：互联网发布：f22到底有多先进知乎编辑：程序博客网时间：2024/05/19 04:55

1，使用webpack.optimize.CommonsChunkPlugin（webpack内建插件）提取公共代码（如react、immutable）
2，使用WebPack.optimize.UglifyJsPlugin进行代码压缩
3，Webpack 将依赖的库指向全局变量，从而不再打包这个库
4，wepack resolve的alias配置项，可以为常用模块配置改属性
resolve:{
modules: [‘app’, ‘node_modules’],
alias: {
‘react’: path.join(nodeModulesPath, ‘react/dist/react.min’),
‘react-dom’: path.join(nodeModulesPath, ‘react-dom/dist/react-dom.min’),
‘redux’: path.join(nodeModulesPath, ‘redux/dist/redux.min’),
}
}
缺陷：其它第三方库引用alias里面的库仍会打包
解决：设置dll将特定的模块在项目构建前构建好，然后通过页面引入详细思路
5，设置babel的cacheDirectory为true(打包性能提升很明显
6，css-loader 使用0.15.0以前版本原因连接

未完待续

分享自WebPack实例与前端性能优化 webpack-optimization

0 0