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

背景

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版本可能存在不同，所以需要编写打包指令

3、进行第三方模块打包，打包之后，build文件夹下会多一个vendor-manifest.json文件


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优化前后的打包时间，会发现时间提升一倍左右
第一次打包

优化之后的打包时间