一篇文章带你浅入webpack的DLL优化打包

作者：霁月时间：2026-10-24 03:53:13浏览：154

本文详细介绍如何利用webpack的DLL插件优化第三方库打包。通过分离vendor代码，生成独立的dll文件，可显著减少重复构建时间。教程涵盖从项目初始化、配置webpack.dll.js到使用DllReferencePlugin的完整步骤，实测打包时间从943ms降至473ms，有效提升开发效率。

Webpack DLL优化前言

一、前言

在开发过程中，我们频繁引入第三方依赖库。这些库的代码通常保持静态，不会随项目逻辑频繁变更。然而，每次执行webpack打包时，构建工具仍会重新处理这些稳定的第三方代码，造成不必要的计算资源浪费。为了解决这一效率瓶颈，我们可以采用预打包策略：提前将第三方库单独打包，并在后续构建中引用结果，从而跳过重复处理环节。

基础项目搭建与初始打包

二、实战

1、初始化


npm init

2、局部安装webpack


npm i -D webpack

3、编辑package.json

加入一行代码，方便运行命令， "start": "webpack --config webpack.config.js"


{
 "name": "webpack_demo",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "webpack --config webpack.config.js"
 },
 "author": "",
 "license": "ISC",
 "devDependencies": {
  "webpack": "^4.41.5"
 }
}

4、创建index.html


<html>
<head>
 <meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<!--导入 Webpack 输出的 JavaScript 文件-->
<script src="./dist/bundle.js"></script>
</body>
</html>

5、创建main.js，引入第三方包


import $ from 'jquery';
console.log($);

6、创建webpack.config.js


const path = require('path');
const webpack = require('webpack');
module.exports = {
  // JavaScript 执行入口文件
  entry: './main.js',
  output: {
    // 把所有依赖的模块合并输出到一个 bundle.js 文件
    filename: 'bundle.js',
    // 输出文件都放到 dist 目录下
    path: path.resolve(__dirname, './dist'),
  },
  plugins:[]
};

这样，我们的基础项目已经搭建完成了，我们来打包一下。


npm run start

时间：943ms

Webpack DLL优化前言

DLL优化配置与实施

下面，我们使用DLL优化一下。

1、创建webpack.dll.js

使用插件webpack.DllPlugin


const webpack=require('webpack');
module.exports={
  entry:{
    vendor:['jquery'] // 第三方库
  },
  output:{
    path:__dirname+"/dll",
    filename:'[name].dll.js',
    library:'[name]_library'
  },
  plugins:[
    new webpack.DllPlugin({
      path:__dirname+'/dll/[name]-menifest.json',
      name:'[name]_library'
    })
  ]
}

2、运行一下webpack.dll.js

编辑一下package.json，加入一行"dll": "webpack --config webpack.dll.js"，方便运行。


{
 "name": "webpack_p",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "webpack --config webpack.config.js",
  "dll": "webpack --config webpack.dll.js"
 },
 "author": "",
 "license": "ISC",
 "devDependencies": {
  "webpack": "^4.41.6",
  "webpack-cli": "^3.3.11"
 }
}

运行命令


npm run dll

Webpack DLL优化前言

3、编辑webpack.config.js

使用插件webpack.DllReferencePlugin


const path = require('path');
const webpack = require('webpack');
module.exports = {
  // JavaScript 执行入口文件
  entry: './main.js',
  output: {
    // 把所有依赖的模块合并输出到一个 bundle.js 文件
    filename: 'bundle.js',
    // 输出文件都放到 dist 目录下
    path: path.resolve(__dirname, './dist'),
  },
  plugins:[
    new webpack.DllReferencePlugin({
      manifest: require('./dll/vendor-menifest.json')
    })
  ]
};

4、打包


npm run start

时间：473ms 优化完毕。

Webpack DLL优化前言

总结

三、结语

webpack优化有很多，我将会不断更新，谢谢。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

作者最新文章

tween.js 内存泄漏预防：怎么正确停止动画与清理对象

2026-11-05 15:52:56

Vue或React项目中为何不建议直接使用JS刷新页面

2026-11-05 13:57:30

哪里可以找到高质量的免费JS脚本资源？

2026-11-05 13:15:03

JS数组对象怎么根据指定ID字段去重

2026-11-04 21:41:10

JS数组去重方法性能对比：Set、Map与Filter谁更快

2026-11-04 16:14:15