web前端调用dll_webpackjs性能优化：DllPlugin插件详细使用方

概念

把每次打包不需要变动的文件(一般类库，如:react,lodash)提前打包好，这样每次打包项目的时候，就不需要单独打包这些文件，从而节约了时间

dll Plugin

正常构建

Hash: daa3610a1f7e6d32873d

Version: webpack 4.41.5

Time: 4212ms

Built at: 02/10/2020 6:59:16 PM

构建完dll

Hash: eca9917dfce14b9c2876

Version: webpack 4.41.5

Time: 2742ms

Built at: 02/10/2020 7:00:45 PM

再次build

Hash: a528e9cbdaefb8a893cc

Version: webpack 4.41.5

Time: 1154ms

Built at: 02/10/2020 7:01:16 PM

节省

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当中，需要使用这个插件

将JavaScript或CSS资产添加到html-webpack-plugin生成的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")

})

]

};

参考资料

文章对应的仓库