webpack性能优化之externals与DllPlugin

externals和DllPlugin都是为了分离模块诞生，通过他们可以将一些第三方模块抽离出来，打包的时候不需将某些三方库一起打包如vue、vue-router
这样提高了编译速度，减少了包的大小 利于浏览器的缓存机制，不用每次都重新加载这些库js。

性能优化

我们先来看一个例子

//webpac.base.config.js
let path = require('path')
module.exports={
    entry:'./src/index.js',
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'dist')

    },
    resolve:{
        alias:{
            'vue':'vue/dist/vue.esm'
        }
    }
}

index.js引入Vue和Router

import Vue from 'vue';
import Router from 'vue-router'

此时打包100+kb

image.png

像vue、vue-router这种第三方库，一般是不需要改变的，我们可以将其抽离出来，减小包的体积，提升编译速度，加载更快

方案一 externals

 externals: {
        'vue': 'Vue',
        'vue-router': 'VueRouter',
 },

键值说明 key为 import xxx key value为引入后的值

这时在进行编译

image.png

可以看到包的大小只有1kb了 此时我们运行index.html

Uncaught ReferenceError: Vue is not defined

用externals配置后，因为bundle.js里面没有了静态资源文件，所以需要额外引入，可以在index.html引入

需要注意第三方库需在bundle.js前面引入

 <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
 <script src="https://cdn.bootcss.com/vue-router/3.0.6/vue-router.min.js"></script>
 <script src="../dist/bundle.js"></script>

通过这种方式实现了第三方库外部加载并且我们可以使用import语法

方案二 DllPlugin

将项目依赖的基础模块（第三方模块）抽离出来，然后打包到一个个单独的动态链接库中。当下一次打包时，通过webpackReferencePlugin导入，如果打包过程中发现需要导入的模块存在于某个动态链接库中，就不能再次被打包，而是去动态链接库中get到。

如下案例将vue和vue-router打包成一个动态链接库

新键配置文件webpack.dll.config.js

let path = require('path');
let webpack = require('webpack');
module.exports={
    mode:"development",
    entry:{
        vue:['vue','vue-router']
    },
    output:{
        filename:'_dll_[name].js',
        path:path.resolve(__dirname,'dist'),
        library:'_dll_[name]',//打包后用指定变量接收
    },
    plugins:[
        //生成manifest.json 
        //这个文件是用来让 DLLReferencePlugin 映射到相关的依赖上去的。
        new webpack.DllPlugin({
            name:'_dll_[name]',//manifest.json的name必须与library相同才能与动态链接库建立映射
            path:path.resolve(__dirname,'dist','manifest.json')//清单存放路径
        })
    ]
}

打包后的文件存放在dist下

//manifest.json 
"name": "_dll_vue",
    "content": {
        "../webpack4/node_modules/_process@0.11.10@process/browser.js": {
            "id": "../webpack4/node_modules/_process@0.11.10@process/browser.js",
            "buildMeta": {
                "providedExports": true
            }
        },
        "../webpack4/node_modules/_setimm
    ....

manifest.json 定义了动态链接库的很多模块，模块路径对应打包后文件（_dll_vue.js）里面的路径

//_dll_vue.js
var _dll_vue =
/******/ (function(modules) { // webpackBootstrap
/******/     // The module cache
/******/     var installedModules = {};
/******/
/******/     // The require function
/******/     function __webpack_require__(moduleId) {
/******/
...
**/ "../webpack4/node_modules/_setimmediate@1.0.5@setimmediate/setImmediate.js":
/*!*********************************************************************************!*\
  !*** ../webpack4/node_modules/_setimmediate@1.0.5@setimmediate/setImmediate.js ***!
  \*********************************************************************************/
/*! no static exports found */
/*! all exports used */
/***/ (function(module, exports, __webpack_require__) {

eval("/* WEBPACK VAR INJECTION */(function(global, process) {(function (global, undefined) {\n    \"use strict\";\n\n    if (global.setImmediate) {\n        return;\n    }\n\n    var nextHand
...

_dll_vue.js存放打包后的各个模块

接下来我们要在html中引入_dll_vue.js

但是默认它不知道怎么去动态链接库去找相关模块，既然配置了动态链接库我们就不希望在用到vue的时候还将其打包，所以我们还得配置正式的webpack.config 告诉webpack先去动态链接库找相关模块。

let webpack = require('webpack')
...
 plugins:[
        new webpack.DllReferencePlugin({
            manifest:path.resolve(__dirname,'dist','manifest.json')
        })
    ]
...

此时打包 文件只有1.kb

image.png

并且可以使用import 语法

import Vue from 'vue';
import VueRouter from 'vue-router'

let vm = new Vue({

})
console.log(vm)
console.log(new VueRouter)

image.png