webpack前端代码优化插件

1，简化

：new webpack.optimize.OccurenceOrderPlugin();
因为webpack打包原理：模块 块id ，它会根据id的使用频率和分布来得出最短id，将最短id分配给频率高的模块。还有个插件叫：new webpack.optimize.UglifyJsPlugin(); 不知道这个是干嘛的，说是可以压缩js。。

2，去重：new webpack.optimize.DedupePlugin();

如果你的项目用到很多依赖库，库文件里一定有很多代码是重复的，webpack会对这些文件进行去重，保证不会有重复的代码，并且会封装成一个函数，请求是调用，不会影响语义。

3，chunks 优化：

new webpack.optimize.LimitChunkCountPlugin({maxChunks: 15}); //限制块的总数
new webpack.optimize.MinChunkSizePlugin({minChunkSize:10000}); //限制一块的最小容量
如果编码遇到很多分割点(ajax)，这样就有很多细小的http请求，这样会占用http资源，通过以上两个插件可以合并管理这些模块。

4，单页： app拆分成很多chunk，chunk被路由加载，模块仅仅包含路由和一些库文件。这么做用户通过导航浏览效果很好，初始化页面还有两个请求，一个请求路由，一个加载当前内容。

5，多页：当编译一个多页面的app时，想着页面之间共享代码，只要和多个入口文件一起编译就好，

在插件中添加一个共用插件new CommonsChunkPlugin(“commons.chunk.js”); 入口文件中重复的js文件会统一放在这个commons.chunk.js里。
例如：
var CommonsChunkPlugin = require(“webpack/lib/optimize/CommonsChunkPlugin”);
module.exports = {
entry: {
p1:”./page1”,
p2:”./page2”,
p3:”./page3”,
ap1: “./admin/page1”,
ap2: “./admin/page2”,
}
output: {
filename:”[name].js”
}
plugins: [
new CommonsChunkPlugin(“admin-commons.js”,[“ap1”, “ap2”]),
new CommonsChunkPlugin(“commons.js”, [“p1”, “p2”, “admin-commons.js”])
]
};
可以初始化很多个块chunk，也可以堆叠块，

原文：http://webpack.github.io/docs/optimization.html#chunks