https://robertknight.github.io/posts/webpack-dll-plugins/
webpack一般会把一个文件里import/require的文件都会打包在一起，最近就在做这方面的工作，文件全部打包在一起了 对服务器的请求确实减少了，可是对于jquery和jquery的插件如果在每个文件重复打包，文件大了加载会很慢，而且也没法给jquery和插件做缓存，因为像jquery这样的库 一般是可以放在CDN缓存的，如果如果每个人文件重复打包是完全没法做缓存处理的。
经过各种google,终于找出了一个 还算不错的办法。
首先安装各种插件，比如：npm install jquery, npm install md5 等等
但是项目用到的弹出层layer不能直接通过npm install layer安装，需要通过github地址安装，如下：
npm install https://github.com/sentsin/layer --save
通过DllPlugin插件生成mainfest.json,并把jquery插件按照id打包
jquery和插件一起打包后，可是插件里还是找不到$, 比如在调用
var layer2 = window.jquery_library(2);时 提示 jquery.dll.js:10479 Uncaught TypeError: $ is not a function，如何解决了，在dll配置里加上
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
在用到jquery的地方，需要每次var $ = window.jquery_library(1);这样修改的文件会比较多，我们可以在一个公用的文件里配置好 全局的，把$ 和jquery暴露在全局，如下：
window.jQuery = window.$ = window.jquery_library(1);
另外我们在打包的时候就打包在public/plugins里，把项目中用到的jquery插件也可以放在里面，然后在打包的时候把plugins文件通过webpack插件copy-webpack-plugin复制到打包文件夹里，比如：
var CopyWebpackPlugin = require('copy-webpack-plugin'); //复制文件
plugins.push(new CopyWebpackPlugin([
{ from: publicPathJS+'/plugins',to: 'public/plugins'}
]));
在每次打包的时候，特别是打打的版本好不一样，需要首先清空打包文件夹的文件，然后重新打包，我们通常会用到webpack插件clean-webpack-plugin
var CleanWebpackPlugin = require('clean-webpack-plugin'); //清空文件夹里的文件
//打包之前先删除打包文件里的文件方便重新打包
plugins.push(new CleanWebpackPlugin(['prod'], {
root: basePath,
verbose: true,
dry: false,
watch:true,
exclude: ['plugins']
}));exclude表示不需要清除的文件夹活着文件名称
要导入多个模块中的接口，你可以这样写：
import {detectCats, Kittydar} from "kittydar.js";
当你运行一个包含 import 声明的模块，被引入的模块会先被导入并加载，然后根据依赖关系，每一个模块的内容会使用深度优先的原则进行遍历。跳过已经执行过的模块，以此避免依赖循环。
默认导出
新一代的标准的设计理念是兼容现有的 CommonJS 和 AMD 模块。所以如果你有一个 Node 项目，并且刚刚执行完 npm install lodash，你的 ES6 代码可以独立引入 Lodash 中的函数：
import {each, map} from "lodash"; each([3, 2, 1], x => console.log(x));
然而如果你已经习惯了 _.each 或者看不见 _ 的话就浑身难受，当然这样使用 Lodash 也是不错的方式。
这种情况下，你可以稍微改变一下你的 import 写法，不写花括号：
import _ from "lodash";
这个简写等价于 import {default as _} from "lodash";。所有 CommonJS 和 AMD 模块在被 ES6 代码使用的时候都已经有了默认的导出，这个导出和你在 CommonJS 中 require() 得到的东西是一样的，那就是 exports 对象
Webpack 构建后文件变得很大？
使用 Webpack 打包，前端工程师可以按 CommonJS 或 ES6 Module 的规范写前端 JS 代码，使模块源代码看起来跟后端代码一样简洁，但是，很快发现文件太大（尤其基于 React 进行开发的应用，如果是单页面程序？更大了），为了解决问题，以下是我每次必用的策略：
按需加载 「 Code Split 」
提取公共代码 「 CommonsChunkPlugin 」
第三方库分开打包 「 DllPlugin 」
代码压缩「 UglifyJSPlugin 」
Code Split 概念
Webpack 支持多种模块加载方式。CommonJS 的 require 和 ES6 的 import 是同步加载的，通过这些方式引入的依赖会被 Webpack 打包在一起，文件因而变大。而 AMD 或 CommonJS 的 require.ensure 是按需加载「异步的」，对于一些可以延迟加载的模块「依赖」，应该用这种方式，从而避免文件太大。
同步加载的模块被打包在同一个 chunk 「 一个 chunk 是一个 JS 文件，由一个或若干个模块组成 」，而通过异步加载的模块被打包在另外的 chunk 里，Webpack 以此来进行分片，即 Code split。
Code Split 的方式
AMD : require
CommonJS : require.ensure
ES : System.import
chunk 的内容组成
通过 Code Split 分片，新的 chunk 由异步模块和这些模块的依赖构成。这些模块的依赖按同样的规则构建，即同步加载的模块打包在同一个 chunk，异步加载的模块被切分到新的 chunk。具体看下面的例子，请注意看代码注释的内容，build 目录里的三个文件是 Webpack 打包最终生成的。
Code Split 优化
从上面的例子可见，Code Split 分出来了两个 chunk，即 1.bundle 和 2.bundle，从而减小了主 chunk bundle.js 的文件大小，减轻程序初始化的网络等待。然而，新的问题出现了，1.bundle 和 2.bundle 都包含 io 模块，可见 io 模块有冗余。带着这个问题，下一篇总结 CommonsChunkPlugin 的使用
