Vue项目打包dll优化——提升打包速度

超、凢脫俗 2022-12-02 04:08 508阅读 0赞

## 背景 ##

webpack每次打包都会去处理所有的模块，包括第三方模块。但是我们一般不会去改第三方模块，能不能让第三方模块只处理一次呢？  
webpack的打包时间由两个因素决定：所处理的文件数量，所进行的操作步骤  
优化会增加操作步骤，但是减少的时间大于增加的时间，则是对打包有帮助的

## dll优化 ##

dll为webpack的内置模块  
让webpack只处理一次第三方模块，后续的打包告诉webpack不要处理已经打包过的第三方库。

## 优化步骤 ##

**1、build文件夹下新建webpack.dll.js文件，用于对第三方模块进行打包**

//专门用于打包第三方模块
    const path = require('path');
    const webpack = require('webpack');
    module.exports = { 
        entry:{ 
            //定义需要提前打包的模块
            vendor: ['vue/dist/vue.esm.js','vue-router','axios','loadsh']
        },
        output:{ 
            path:path.join(__dirname,"../static/js"),//static是唯一一个上线之后还可以加载的文件夹
            filename:"[name].dll.js",
            library:"[name]_library"
        },
        plugins:[
            new webpack.DllPlugin({ 
                path:path.join(__dirname,".","[name]-manifest.json"),//通过一个json告诉webpack这些已经打包
                name:"[name]_library" //必须与上面的library同名，否则包引入之后会出错
            })
        ]
    }

**2、package.json中编写dll打包命令**

> tips  
> 编写打包质量和直接在命令行中使用webpack打包的区别  
> 直接在命令行中使用的是全局安装的webpack  
> 打包指令使用的是项目内部的webpack  
> 由于项目差异化，全局与项目内部webpack版本可能存在不同，所以需要编写打包指令

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center]  
**3、进行第三方模块打包，打包之后，build文件夹下会多一个vendor-manifest.json文件**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center 1]  
![在这里插入图片描述][20200829163744952.png_pic_center]  
4、在build下的webpack.prod.conf.js中的plugins内插入dll插件，将vendor-manifest.json传入，告诉webpack这部分内容不需要再打包

//接收之前定义好的json文件，让正式环境明确哪些不用再打包
    new webpack.DllReferencePlugin({ 
      context: path.join(__dirname,".."),
      manifest: require("./vendor-manifest.json")
    })

**5、比对dll优化前后的打包时间，会发现时间提升一倍左右**  
第一次打包  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center 2]  
优化之后的打包时间  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/d579f2e17c7f49b0828ec93ec693620b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/68f7427d135249d1b6b772734e30f9ca.png
[20200829163744952.png_pic_center]: /images/20221123/27e2c8f97df148ada70e1a31a6770edc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/d37b668035e94b9cbd2a84a17983a757.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MDk3MDk4Nw_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/4d2bf254a4464bf2a09cc98f364babfc.png