webpack + dll 动态链接库 解决打包慢问题

参考：

Webpack DLL 配置教程

webpack使用-详解DllPlugin

Webpack Bundle Analyzer插件的使用

**主要目标：

使用webpack + dll 动态链接库方式，避免每次打包都重新构建所有第三方库，节约时间；

**问题：

当插件新增或首次打包时，时间依旧会变长，第二次就快很多，所以当插件固定时，做一次预打包处理，到真正需要打包时，速度会快很多

1.环境：

"react": "^16.13.1",

"webpack": "^4.42.0",

"webpack-cli": "^4.3.1"

因为webpack4.x版本的webpack和webpack-cli是分开安装的，所以还要全局安装webpack-cli

关于安装webpack-cli的问题：webpack学习系列（一），安装webpack与webpack-cli

如果全局安装不管用，试试配置环境变量，变量值就是我全局webpack-cli安装路径

2.DLL

动态链接库，是一个包含可由多个程序，同时使用的代码和数据的库。可以更为容易地将更新应用于各个模块，而不会影响该程序的其他部分。

3.在package.json中添加下列脚本

"build:dll": "webpack --config config/dll.config.js --mode production"

4.在config目录下创建dll.config.js文件

5.配置dll.config.js文件

const webpack = require("webpack");
const path = require("path");

//需要放在链接库的插件
const vendors = ["react", "react-dom", "redux"];

module.exports = {
  entry: {//插件唯一入口，直接使用链接库中已存在插件，不再额外打包，减少打包时间
    lib: vendors
  },
  output: {
    filename: "[name].dll.js",//打包后文件名
    path: path.join(__dirname, "../public/dll"),//打包后文件存放位置
    libraryTarget: "var",//默认值-var；暴露为一个变量；将入口起点的返回值，赋值给library提供的变量名
    library: "_dll_[name]"//指定的是你require时候的模块名
  },
  plugins: [
    //接入DllPlugin
    new webpack.DllPlugin({
      //动态链接库输出时的文件名称及路径
      path: path.join(__dirname, "../public/dll", "[name].manifest.json"),
      //动态链接库变量名称，和library中声明的名称一致
      name: "_dll_[name]"
    })
  ]
};

6.在webpack.config.js的根目录plugins中配置映射关系

// 引用 dll 的 manifest 文件来把依赖的名称映射到模块的 id 上
new webpack.DllReferencePlugin({
   manifest: require(path.join(__dirname, "../public/dll/lib.manifest.json"))
}),

7.打包信息查看，在webpackDevServer.config.js文件中，把quiet: true,改为quiet: false,

8.在入口文件index.html中引入dll，路径就是第5步在dll.config.js中规定的打包后文件路径

<!--dll依赖-->
<script src="./dll/lib.dll.js"></script>

9.运行yarn build:dll 可以看到 public 下生成 dll 文件夹

10.打包对比：屏蔽/放开 在webpack.config.js的根目录plugins中配置的映射关系

打包的大小和时间均有明显变化

11.优化，参考文章提供了三种优化方案，我使用了最简单的第三种

构建前清空文件夹，即当dll.config.js变化时，执行清空命令 npm run make:dll，再次生成新的打包文件

首先安装依赖 yarn add -D rimraf npm-run-all

接着修改package.json中的scripts对象，如下

"scripts": {
    ...
    "make:dll": "npm-run-all clear:dll build:dll",
    "clear:dll": "rimraf public/dll",
    "build:dll": "webpack --config config/dll.config.js --mode production",
    ...
  },

12.优化后打包比较，打包时间和体积，都有略微优化

13.拓展：打包可视化分析-webpack-bundle-analyzer插件

挺有趣的插件，配置简单，

**将路径设置在打包路径是为了监听打包后变化，这样会使打包文件体积变大，打包上线时，将这个文件删除就行了

**打包后再运行这个命令

01：安装 yarn add -D webpack-bundle-analyzer

02：在package.json中的scripts里面配置特定命令，其中build为打包后文件路径，视情况而定

"report": "webpack-bundle-analyzer --port 8123 build/stats.json"

03：webpack.config.js中配置

顶部声明

//分析包内容
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

根目录plugins中开启BundleAnalyzerPlugin，如果不加配置disabled，会导致start和build都会默认打开分析插件，争抢8888端口，引起冲突报错

plugins: [
    //开启 BundleAnalyzerPlugin
      new BundleAnalyzerPlugin({
        analyzerMode:'disabled',
        generateStatsFile:true,
        statsOptions:{source:false}
      }),
    ...
}

04：启动命令 yarn report，自动弹出 http://127.0.0.1:8123 页面，展示如下