详解如何利用webpack提高Vue项目构建速度

前言

最近有人对我的Vue2后端管理系统解决方案提出了一个问题，说执行npm run build构建项目时速度非常慢，然后引起了我的注意。项目中引入了大量的第三方库，导致项目庞大。然而这些库并不是每次都修改，而且在构建的时候还要重新打包这些库，浪费了很多时间。因此，将这些不经常变化的第三方库提取出来，下次构建时不再构建这些库，这样可以大大缩短构建时间。那么如何实现呢？

解决方案

DllPlugin 和 DllReferencePlugin

经过查找资料，发现可以利用webpack的插件DllPlugin和DllReferencePlugin来实现我们想要的功能。

DllPlugin可以将我们需要打包的第三方库打包成js文件和json文件。这个json文件将映射每个打包模块的地址和id。 DllReferencePlugin 通过读取此 json 文件来使用这些包。模块。

下一步就是看如何实现了。

简介

在build文件夹下新建webpack.dll.config.js（项目基于vue-cli）

const 路径 = require('路径');
const webpack = require('webpack');

模块. 导出 = {
 入口： {
  供应商：['vue/dist/vue.common.js'，'vue-router'，'babel-polyfill'，'axios'，'vue-echarts-v3']
 },
 输出： {
  路径：path.join(__dirname, '../static/js'),
  文件名: '[名称].dll.js',
  library: '[name]_library' // 在vendor.dll.js中公开的全局变量名称
 },
 插件：[新的 webpack.DllPlugin({
   路径：path.join(__dirname, '.', '[name]-manifest.json'),
   名称：'[名称]_library'
  }),
  新的 webpack.optimize.UglifyJsPlugin({
   压缩：{
    警告：假
   }
  })
 ]
};

然后在package.json中配置命令

“脚本”：{
  ...
  "build:dll": "webpack --config build/webpack.dll.conf.js"
}

执行npm run build:dll命令生成vendor.dll.js和vendor-manifest.json

需要在index.html中引入vendor.dll.js

vendor-manifest.json内容大致如下：

{
 “名称”：“供应商库”，
 “内容”： {
  “./node_modules/core-js/modules/_export.js”：{
   “id”：0，
   “元”：{}
  },
  ...
}

接下来，在webpack.base.config.js中使用DLLReferencePlugin来使用DllPlugin生成的DLL Bundle

var webpack = require('webpack');

模块. 导出 = {
  入口： {
    应用程序：['./src/main.js']
  },
  模块： {
    ...
  }
  //添加DllReferencePlugin插件
  插件：[
    新的 webpack.DllReferencePlugin({上下文：path.resolve(__dirname, '..'),
      清单：require('./vendor-manifest.json')
    }),
  ]
}

最初的构建花费了 95446 毫秒。配置完成后，构建执行仅需 14360ms，缩短了 75% 的时间。

但是有一个问题。当过多的第三方依赖被打包到vendor.dll.js中时，如果文件过大，也会影响首屏加载时间。因此，我们必须权衡利弊。无需封装可异步加载的插件。不要只是将所有东西打包在这里以获得构建的乐趣。

示例地址：vue-manage-system