vue项目webpack构建优化-提取公共依赖库dll

╰+攻爆jí腚メ 2022-11-21 15:27 293阅读 0赞

### 背景 ###

目前前端发展已经到了一个工程化比较成熟的阶段，前端的职责也越来越重，大多数的开发者选择使用webpack构建项目。当我们的项目越来越大，依赖包越来越多，那么构建速度会非常慢。

### 解决方案 ###

我们可以将固定的依赖包（如vue,element-ui,axios等）抽离出来，不在每次启动项目时重新构建。这一操作我们可以借鉴webpack新出的dll这个概念。

> Dll这个概念应该是借鉴了Windows系统的dll。一个dll包，就是一个纯纯的依赖库，它本身不能运行，是用来给你的app引用的。
> 
>  
> 
> 打包dll的时候，Webpack会将所有包含的库做一个索引，写在一个manifest文件中，而引用dll的代码（dll user）在打包的时候，只需要读取这个manifest文件，就可以了。
> 
> 这么一来有几个好处：
> 
> 1.  Dll打包以后是独立存在的，只要其包含的库没有增减、升级，hash也不会变化，因此线上的dll代码不需要随着版本发布频繁更新。
> 2.  App部分代码修改后，只需要编译app部分的代码，dll部分，只要包含的库没有增减、升级，就不需要重新打包。这样也大大提高了每次编译的速度。
> 3.  假设你有多个项目，使用了相同的一些依赖库，它们就可以共用一个dll。

### 操作步骤 ###

以vue-cli3的项目为例

1.在项目根目录下新建webpack.dll.conf.js

// webpack.dll.conf.js
    
    /**
     * @description 提取公共依赖库
     * @author: hruomei
     * @update 
     * @date: 2020-10-29 19:07:34
     */
    
    const path = require('path')
    const webpack = require('webpack')
    const CleanWebpackPlugin = require('clean-webpack-plugin')
    
    // dll文件存放的目录
    const dllPath = 'public/vendor'
    
    module.exports = {
        entry: {
            // 需要提取的库文件
            vendor: ['vue', 'vue-router', 'vuex', 'axios', 'element-ui','screenfull', 'core-decorators', 'core-js']
        },
        output: {
            path: path.join(__dirname, dllPath),
            filename: '[name].dll.js',
            // vendor.dll.js中暴露出的全局变量名
            // 保持与 webpack.DllPlugin 中名称一致
            library: '[name]_[hash]'
        },
        plugins: [
            // 清除之前的dll文件
            new CleanWebpackPlugin(['*.*'], {
                root: path.join(__dirname, dllPath)
            }),
            // 设置环境变量
            new webpack.DefinePlugin({
                'process.env': {
                    NODE_ENV: 'production'
                }
            }),
            // manifest.json 描述动态链接库包含了哪些内容
            new webpack.DllPlugin({
                path: path.join(__dirname, dllPath, '[name]-manifest.json'),
                // 保持与 output.library 中名称一致
                name: '[name]_[hash]',
                context: process.cwd()
            })
        ]
    }

2.修改vue.config.js配置

const webpack = require("webpack");
    
    module.exports = {
        ...
    	configureWebpack: {
    		...
            plugins: [
                new webpack.DllReferencePlugin({
                    context: process.cwd(),
                    manifest: require("./public/vendor/vendor-manifest.json")
                })
            ]
        }
    }

3.配置npm scripts

...
    "scripts": {
        ...
        "dll": "webpack -p --progress --config ./webpack.dll.conf.js"
      }
    ...

4.执行命令

npm run dll

执行完毕，再public目录下生成了vender文件夹

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70][]

5.public/index.html添加依赖

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70 1][]

以上，需要注意的是文件引用的路径问题，需要根据vue.config.js中的publicPath做调整

参考：[https://segmentfault.com/a/1190000005969643][https_segmentfault.com_a_1190000005969643]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70]: /images/20221120/01a3c3479f41428b9ec1dd11cffb843c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70 1]: /images/20221120/64fda54d9a7345c290f840bac58bf538.png
[https_segmentfault.com_a_1190000005969643]: https://segmentfault.com/a/1190000005969643