[打包优化]Webpack DLL

写作不易，未经作者允许禁止以任何形式转载！
如果觉得文章不错，欢迎关注、点赞和分享！
掘金原文链接

认识DLL库

• 什么是DLL

  • DLL全称是动态链接库(Dynamic Link Library)，是为软件在Windows中实现共享函数库的一种实现方式;
  • 那么webpack中也有内置DLL的功能，它指的是可以将可以共享，并且不经常改变的代码，抽取成一个共享的库;
  • 这个库在之后编译的过程中，会被引入到其他项目的代码中，减少的打包的时间;

• DDL库的使用分为两步:

  • 第一步:打包一个DLL库;
  • 第二步:项目中引入DLL库

DLL打包

webpack内置DllPlugin帮助生成DLL文件

• webpack.common.js
  • context：执行上下文，
  • entry：
    • key：name（placeholder）
    • value：要打包的包名
  • output（常规）
  • plugins
    • DllPlugin
      • name：定义生成dll文件的名称
      • path：生成dll文件的文件路径

const path = require("path");
const {
   DllPlugin} = require("webpack");
const {
   merge} = require<