当前位置: 首页 > 编程笔记 >

详解Webpack DLL用法以及功能

蒯坚白
2023-03-14
本文向大家介绍详解Webpack DLL用法以及功能,包括了详解Webpack DLL用法以及功能的使用技巧和注意事项,需要的朋友参考一下

在使用webpack过程中,本人也发现发现构建速度非常慢,Webpack性能优化的方式有很多种,本文介绍了dll,dll是一种最简单粗暴并且极其有效的优化方式。

前言

在用 Webpack 打包的时候,对于一些不经常更新的第三方库,比如 react,lodash,我们希望能和自己的代码分离开,Webpack 社区有两种方案

  1. CommonsChunkPlugin
  2. DLLPlugin

对于 CommonsChunkPlugin,webpack 每次打包实际还是需要去处理这些第三方库,只是打包完之后,能把第三方库和我们自己的代码分开。而DLLPlugin 则是能把第三方代码完全分离开,即每次只打包项目自身的代码。

用法

要使用 DLLPlugin,需要额外新建一个配置文件。所以对于用这种方式打包的项目,一般会有下面两个配置文件

  1. webpack.config.js
  2. webpack.dll.config.js

先来看下 webpack.dll.config.js

const webpack = require('webpack')
const library = '[name]_lib'
const path = require('path')

module.exports = {
 entry: {
  vendors: ['react', 'lodash']
 },

 output: {
  filename: '[name].dll.js',
  path: 'dist/',
  library
 },

 plugins: [
  new webpack.DllPlugin({
   path: path.join(__dirname, 'dist/[name]-manifest.json'),
   // This must match the output.library option above
   name: library
  }),
 ],
}

再改下 webpack.config.js 文件

const webpack = require('webpack')

module.exports = {
 entry: {
  app: './src/index'
 },
 output: {
  filename: 'app.bundle.js',
  path: 'dist/',
 },
 plugins: [
  new webpack.DllReferencePlugin({
   context: __dirname,
   manifest: require('./dist/vendors-manifest.json')
  })
 ]
}

manifest: require('./dist/vendors-manifest.json') 这里的路径要和 webpack.dll.config.js 里面的对应。

然后运行

$ webpack --config webpack.dll.config.js
$ webpack --config webpack.config.js

然后你的 html 文件像下面这样引用

<script src="/dist/vendors.dll.js"></script>
<script src="/dist/app.bundle.js"></script>

DLL Link Plugin

上面的用法也存在一些不方便的地方,比如在 webpack.config.js 中要明确指出对应的 manifest.json 文件。还有当 DLL 需要更新的时候,比如 react 升级了,或者加入新的第三方库,都需要手动像下面这样编译一次。

$ webpack --config webpack.dll.config.js

因为上面这些问题,所以基于官方的 DllReferencePlugin,我写了一个打包的插件,Dll Link Plugin。

使用这个插件,只需要对 webpack.config.js 作下小小的改动

const webpack = require('webpack')
const DllLinkPlugin = require('dll-link-webpack-plugin')

module.exports = {
 // ...
 plugins: [
  new DllLinkPlugin({
   config: require('webpack.dll.config.js')
  })
 ]
}

直接替换掉 DllReferencePlugin,然后传入对应的 DLL 配置文件就可以了。每次打包的时候,只需要运行

$ webpack --config webpack.config.js

上面的命令便会自动生成对应的 vendors 文件,需要更新的时候,也会自动更新。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍Python字典简介以及用法详解,包括了Python字典简介以及用法详解的使用技巧和注意事项,需要的朋友参考一下 老规矩以下方法环境2.7.x,请3.x以上版本的朋友记得格式print(输出内容放入括号内) 字典的基本组成以及用法 首先来说说字典是由key键与value值一一对应来组成字典的基本结构 key键不能由list列表,dict字典等多元素命名, key是唯一属性又可以称一对

  • 本文向大家介绍springboot2.3 整合mybatis-plus 高级功能及用法详解,包括了springboot2.3 整合mybatis-plus 高级功能及用法详解的使用技巧和注意事项,需要的朋友参考一下 —学习并使用mybatis-plus的一些高级功能的用法例如: AR模式、 乐观锁 、逻辑删除 、自动填充、数据保护等功能 为了方便演示,咱们还是新建一个全新的项目 引入mp依赖 ym

  • 本文向大家介绍Python中的特殊方法以及应用详解,包括了Python中的特殊方法以及应用详解的使用技巧和注意事项,需要的朋友参考一下 前言 Python 中的特殊方法主要是为了被解释器调用的,因此应该尽量使用 len(my_object) 而不是 my_object.__len__() 这种写法。在执行 len(my_object) 时,Python 解释器会自行调用 my_object 中实现

  • 本文向大家介绍详解Java中NullPointerException异常的原因详解以及解决方法,包括了详解Java中NullPointerException异常的原因详解以及解决方法的使用技巧和注意事项,需要的朋友参考一下 NullPointerException是当您尝试使用指向内存中空位置的引用(null)时发生的异常,就好像它引用了一个对象一样。 当我们声明引用变量(即对象)时,实际上是在创

  • 本文向大家介绍Android下拉刷新以及GridView使用方法详解,包括了Android下拉刷新以及GridView使用方法详解的使用技巧和注意事项,需要的朋友参考一下 GridView是类似于ListView的控件,只是GridView可以使用多个列来呈现内容,而ListView是以行为单位,所以用法上是差不多的。 主布局文件,因为要做下拉刷新,所以加了一个ProgressBar,GridVi

  • 本文向大家介绍详解KMP算法以及python如何实现,包括了详解KMP算法以及python如何实现的使用技巧和注意事项,需要的朋友参考一下 算法思路 Knuth-Morris-Pratt(KMP)算法是解决字符串匹配问题的经典算法,下面通过一个例子来演示一下: 给定字符串"BBC ABCDAB ABCDABCDABDE",检查里面是否包含另一个字符串"ABCDABD"。 1.从头开始依次匹配字符,