webpack4.0 dllPlugin
2019-07-07 本文已影响0人
成熟稳重的李先生
DLLPlugin 和 DLLReferencePlugin 用某种方法实现了拆分 bundles，同时还大大提升了构建的速度。在打包时，有的第三方模块不轻易变动，但是体积又很大，每次打包如果都带上它，打包的效率会大大降低，此时我们可以引入一个“动态链接库”的概念，就是将这些不常改变的东西单独打包，然后再打包业务代码，每次打包业务代码会查询“动态链接库”，“这个第三方模块有没有打包啊？”，如果有，那么不重新打，没有的话就打包一次。
此处我们以“react”为例，首先安装“react”和“react-dom”，并且安装react语法转换器，@babel/preset-react
//webpack.config.js
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
include: path.resolve("src"),
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env", "@babel/preset-react"] //添加react语法转换器
}
},
include: path.resolve("src"),
exclude: /node_modules/
}
]
}
// index.js
import React from "react";
import { render } from "react-dom";
render(<h1>jsx</h1>, window.root);
打包后：
12004.png
生成的js有1.24兆，是因为将react和react-dom也打包进去了，因为这俩是第三方库，而且不轻易改变，不会影响业务，我们考虑将他们拉出来重新打包。
首先，新建一个webpack.config.react.js文件，定义一些打包react的配置，打码如下：
//webpack.config.react.js
let path = require("path");
let webpack = require("webpack");
module.exports = {
mode: "development",
entry: {
react: ["react", "react-dom"]
},
output: {
filename: "_dll_[name].js", //产生的文件名
path: path.resolve(__dirname, "dist"),
library: "_dll_[name]" // _dll_react
// libraryTarget: "var", // 指定输出文件的输出方式，变量-var，commonjs-export[..], umd-require
},
plugins: [
new webpack.DllPlugin({
// name == library
name: "_dll_[name]",
path: path.resolve(__dirname, "dist", "manifest.json") //在dist下生成一个任务manifest.json
})
]
};
然后在html中引入这个打包好的第三方js“_dll_react.js”
//index.html
<body>
<div id="root"></div>
<script src="./_dll_react.js"></script>
</body>
然后在业务的webpack配置文件中引入这个动态链接库
// webpack.config.js
plugins: [
new webpack.DllReferencePlugin({
manifest: path.resolve(__dirname, "dist", "manifest.json") //index.js中引入react和react-dom时，首先会从这个动态链接库中查询，查询不到才会打包
}),
new HtmlWebpackPlugin({
template: "./src/index.html",
filename: "index.html",
minify: {
removeAttributeQuotes: true,
collapseWhitespace: true
},
hash: true
})
]
再次打包：
213907.png
可以看到，这样下来，打包的js只有6K，大大地提高了效率
