使用webpack.DllPlugin与webpack.DllReferencePlugin解决webpack打包慢问题

最新推荐文章于 2024-04-28 10:00:00 发布

hanxue_tyc

最新推荐文章于 2024-04-28 10:00:00 发布

阅读量8.6k

点赞数 1

分类专栏： vue踩坑记录

本文链接：https://blog.csdn.net/hanxue_tyc/article/details/76795861

版权

针对webpack打包慢的问题，通过使用webpack的DllPlugin和DllReferencePlugin，将第三方库与业务代码分离打包，显著提高了项目的打包速度。创建webpack.dll.config.js配置文件，定义第三方插件到vendor中，更新webpack.config.js，并在html入口文件引入生成的vendor.dll.js。在package.json中添加快捷命令，打包时先执行dll命令生成vendor-manifest.json和vendor.dll.js，再执行常规build，最终实现从20秒左右的打包时间降至2、3秒。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为公司的vue项目要与之前的结合，所以需要webpack打包后的代码，每次修改内容都需要重新打包，webpack打包速度太慢，因此上网搜索找到解决办法：
使用webpack插件webpack.DllPlugin与webpack.DllReferencePlugin将不需要改动的第三方插件与自己的业务代码进行分开打包，
首先：
在项目根目录新建一个文件webpack.dll.config.js

const path    = require('path');
const webpack = require('webpack');
module.exports = {
  entry: {
      vendor: ['vue-router','vuex','vue/dist/vue.common.js',