Webpack DLL优化打包实战教程：提升构建速度

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优化有很多，我将会不断更新，谢谢。

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

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

Webpack DLL优化前言

基础项目搭建与初始打包

DLL优化配置与实施

总结

实用工具推荐