webapck 速度优化策略

一、概述

1、使用高版本Webpack

2、多进程/多实例构建

3、分包

4、缓存

5、缩小构建目标

二、多进程/多实例构建

(1)happypack

webapck 速度优化策略

happypack:https://www.npmjs.com/package/happypack

(2)uglifyjs-webpack-plugin

https://webpack.docschina.org/plugins/uglifyjs-webpack-plugin/#src/components/Sidebar/Sidebar.jsx

三、分包

思路(1):将react、react-dom基础包通过cdn引入,不打入bundle中

方法:使用html-webpack-externals-plugin

webapck 速度优化策略

webapck 速度优化策略

思路(2)将react、react-dom、redux、react-redux基础包和业务基础包打包成一个文件。

方法:使用DLLPlugin进行分包, DllReferencePlugin对manifest.json引用。

webapck 速度优化策略

webapck 速度优化策略

四、缓存

使用HardSourceWebpackPlugin 或者cache-loader

webapck 速度优化策略

五、缩小构建目标

比如 babel-loader 不解析 node_modules

webapck 速度优化策略

上一篇:[bzoj1430]小猴打架_prufer序列


下一篇:将excel里面的数据导入到程序里面