dll预编译提高webpack打包速度

一，webpack的dll功能

基于webpack3构建

1.1 dll介绍

我们构建前端项目的时候，往往希望第三方库（vendors）和自己写的代码可以分开打包，因为第三方库往往不需要经常打包更新。对此Webpack的文档建议用CommonsChunkPlugin来单独打包第三方库

我们这里的dll.js是提前打包好了的，而不是在每次build的时候去打包输出的；这样才能做到依赖包一次构建，无限次使用
webpack输出的文件名都带有hash值；而用dll合并后输出的文件名是固定的

条目：{ 
  vendor：[ “ jquery”，“ other-lib” ]，
  app：“ ./entry”
 } 
new CommonsChunkPlugin（{ 
  name：“ vendor”，

  //文件名：“ vendor.js” //（给块一个不同的名称）
  

  minChunks：Infinity，//（带有更多条目，这确保没有其他模块//进入供应商块） }）

通常为了对抗缓存，我们会给售出文件的文件名中加入hash的后缀-但是-我们编辑了app部分的代码后，重新打包，发现vendor的hash也变化了

dll预编译提高webpack打包速度

这么一来，意味着每次发布版本的时候，供应商代码都要刷新，直到我并没有修改其中的代码。这样并不符合我们分开打包的初衷

Dll是Webpack最近新加的功能
Dll概念这个应该的英文借鉴了Windows系统-的dll。一个dll包，就是一个纯纯的依赖库，它本身不能运行，用来的英文给你的app引用的
打包dll的时候，Webpack重置所有包含的库做一个索引，写在一个manifest文件中，而引用dll的代码（dll user）在打包的时候，只需要读取这个manifest文件，就可以了。

优势

Dll打包以后是独立存在的，只要其包含的库没有增减，升级，hash也不会变化，因此在线的dll代码不需要替换版本发布替换更新
App部分代码修改后，只需要编译app部分的代码，dll部分，只要包含的库没有增减，升级，就不需要重新打包。这样也大大提高了每次编译的速度
假设你有多个项目，使用了相同的一些依赖库，它们就可以共用一个dll

1.2 dll使用

首先要先建立一个dll的配置文件，entry只包含第三方库

初步：新建webpack.dll.conf.js

webpack.DllPlugin的选项中，path是manifest文件的输出路径；name是dll暴露的对象名，要跟output.library保持一致

// build / webpack.dll.conf.js

const path = 要求（'path'）
const webpack = 要求（'webpack'）

module .exports = { 
  entry：{ //把这些资源打包成dll，提高编译速度     反应：[ 'react'，'react-router-dom'，'redux'，'redux-immutable'，'immutable'，' react-redux”，“ react-router”，“ redux-logger”，“ redux-thunk”，“ styled-components” ]，    ui：[ 'antd-mobile'，'antd' ]，    其他：[ 'react-图标”，“ axios”，“剪贴板”，“驼峰”，“ lodash”，“ md5”
    


，'moment'，'normalizr' ] 
  }，
  输出：{ 
    path：path.resolve（__ dirname，“ ../dist/static/js”），
    文件名：`[name] .dll.js`，
    库：'[名称] _library'
   }，
  插件：[ 
... Object.keys（[ 'react'，'ui'，'others' ]）。map（name => { return new webpack.DllReferencePlugin（{         context：'。'，        清单：require（`../static/ $ {name} .manifest。json`
       

），
      }）
    }），新的 webpack.optimize.UglifyJsPlugin（）  ] }

第二步：加一个命令

// package.json 
“ scripts”：{ “ dll”：“ webpack --config config / webpack.dll.conf.js” }

执行npm run dll

运行Webpack，会输出两个文件一个是打包好的vendor.js，一个就是manifest.json，长这样

{ “名称”：“vendor_ac51ba426d4f259b8b18” ， “内容”：{ “./node_modules/antd/dist/antd.js” ：1，“./node_modules/react/react.js” ：2，” ./node_modules/react /lib/React.js “：3，” ./node_modules/react/node_modules/object-assign/index.js “：4，” ./node_modules/react/lib/ReactChildren.js “：5，” ./node_modules /react/lib/PooledClass.js “：6，” ./node_modules/react/lib/reactProdInvariant.js”：7，
  
  
    
    
    
    
    
    
    
    “./node_modules/fbjs/lib/invariant.js” ：8，“./node_modules/react/lib/ReactElement.js” ：9，    ............

Webpack将每个库都进行了编号索引，的之后dll user可以读取这个文件，用直接id来引用

dll预编译提高webpack打包速度

第三步：在plugins中增加配置

//建立/ webpack.prod.conf.js 
模块 .exports = { 
   插件：[ 新 webpack.DllReferencePlugin（{  
 清单：要求（'../dll/react-manifest.json' ） 
 }），新 webpack.DllReferencePlugin（ {  
  清单：要求（'../dll/ui-manifest.json' ）
 }），新 webpack.DllReferencePlugin（{ 
 清单：要求（'../dll/others-manifest.json' ）  
}） 
  ] }

再次执行npm run build

之前

dll预编译提高webpack打包速度

之后

dll预编译提高webpack打包速度

二，happypack多线程打包

一般情况下，js是单线程执行的，但node不是。利用node提供的多线程环境，happypack是可以多线程打包的。基本上打开官网看了一下readme就可以配置了，特别是我只针对js的编译进行优化，配置还是比较简单的。

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

happyPack把所有串行的东西并行处理，合并loader并行处理，多余文件处理时间

// build / webpack.prod.conf.js

// @file：webpack.config.js 
const HappyPack = require（'happypack'）; 
exports.module = {
规则：[ {
测试：/. js$/，// 1）用“ happypack / loader”替换您的原始加载程序列表：//加载程序：['babel-loader？presets [] = es2015' ]，       
使用：'happypack / loader'，
包括：[ / * ... * / ]，
排除：[ / * ... * / ] 
}   ]，
插件：[ // 2）创建插件：
new HappyPack（ { // 3）重新添加您在上面＃1中替换的装载机：          
           加载程序：[ 'babel-loader？presets [] = es2015' ] 
    }）
  ] 
}

这时的编译时间也颠倒了一些

dll预编译提高webpack打包速度

一，webpack的dll功能

1.1 dll介绍

1.2 dll使用

二，happypack多线程打包

三，更多参考