webpackjs性能优化:DllPlugin插件详细使用方式-王树东的博客

参考资料

文章对应的仓库

https://gitlab.com/webpackjs/webpack-dll-demo.git
备注:需要在https://shudong.wang/about 联系作者 添加权限

dll Plugin

https://www.npmjs.com/package/add-asset-html-webpack-plugin

正常构建

Hash: daa3610a1f7e6d32873d
Version: webpack 4.41.5
Time: 4212ms
Built at: 02/10/2020 6:59:16 PM
webpackjs性能优化:DllPlugin插件详细使用方式-王树东的博客

构建完dll

Hash: eca9917dfce14b9c2876
Version: webpack 4.41.5
Time: 2742ms
Built at: 02/10/2020 7:00:45 PM
webpackjs性能优化:DllPlugin插件详细使用方式-王树东的博客

再次build

Hash: a528e9cbdaefb8a893cc
Version: webpack 4.41.5
Time: 1154ms
Built at: 02/10/2020 7:01:16 PM
webpackjs性能优化:DllPlugin插件详细使用方式-王树东的博客

节省

4212-1154=3058ms

使用方式

单独创建一个webpack文件, webpack.dll.js 专门用来,打包dll包相关

module.exports = {
mode: "production",
...
plugins: [
new webpack.DllPlugin({
name: "[name]",
path: path.resolve(__dirname, "../dll/[name].manifest.json")
})
]
};

webpack.DllPlugin

此插件用于单独的webpack配置中,专门用于创建dll-only-bundle。它创建了一个清单。json文件,DllReferencePlugin使用它来映射依赖项。

参数如下:

context (optional): context of requests in the manifest file (defaults to the webpack context.)
name: name of the exposed dll function (TemplatePaths: [hash] & [name] )
path: absolute path to the manifest json file (output)
entryOnly (boolean = true): if true, only entry points will be exposed
type: type of the dll bundle

DllReferencePlugin 打包完成后,在项目中做对应关系使用插件

This plugin is used in the primary webpack config, it references the dll-only-bundle(s) to require pre-built dependencies.
CHINESE (SIMPLIFIED)
该插件在主要的webpack配置中使用,它引用dll-only-bundle以要求预先构建的依赖项。

参数如下:

context: (absolute path) context of requests in the manifest (or content property)
manifest : an object containing content and name or a string to the absolute path of the JSON manifest to be loaded upon compilation
content (optional): the mappings from request to module id (defaults to manifest.content)
name (optional): an identifier where the dll is exposed (defaults to manifest.name) (see also externals)
scope (optional): prefix which is used for accessing the content of the dll
sourceType (optional): how the dll is exposed (libraryTarget)

DllReferencePlugin demo参考:

new webpack.DllReferencePlugin({
  manifest: path.resolve(__dirname, "../dll", '符合条件的文件')
})

在打包的webpack中,使用了这个插件,每次打包就会取,dll 里面的文件,避免重复打包

AddAssetHtmlWebpackPlugin :这时候打包完毕后,没有把相关的js引用到html当中,需要使用这个插件

webpack.dll.js 全部代码参考

const path = require("path");
const webpack = require("webpack");
module.exports = {
  mode: "production",
  entry: {
    vendors: ["lodash"],
    react: ["react", "react-dom"],
    jquery: ["jquery"]
  },
  output: {
    filename: "[name].dll.js",
    path: path.resolve(__dirname, "../dll"),
    library: "[name]"
  },
  plugins: [
    new webpack.DllPlugin({
      name: "[name]",
      path: path.resolve(__dirname, "../dll/[name].manifest.json")
    })
  ]
};

文章所有代码仓库地址

https://gitlab.com/webpackjs/webpack-dll-demo.git
备注:需要在https://shudong.wang/about 联系作者 添加权限

参考资料