webpack之代码分离

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 的使用