动态链接库
yarn add react react-dom
正常使用
webpack.config.js
{
test: /\.js$/,
exclude: '/node_modules/',
include: path.resolve('src'),
use: {
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env',
'@babel/preset-react'
]
}
}
}
index.js
import React from 'react'
import {render} from 'react-dom'
render(<h1>111111</h1>, window.root)
index.html
<div id="root"></div>
独立的将react react-dom 打包好, 打包好再引用，从而减少webpack每次都要打包react
创建webpack.config.react.js
let path = require('path')
let webpack = require('webpack')
module.exports = {
mode: 'development',
entry: {
// test: './src/test.js'
react: ['react', 'react-dom']
},
output: {
filename: '_dll_[name].js', // 产生的文件名
path: path.resolve(__dirname, 'dist'),
library: '_dll_[name]', // 给输出的结果加个名字
// libraryTarget: 'var' // 配置如何暴露 library
// commonjs 结果放在export属性上， umd统一资源模块, 默认是var
},
plugins: [
new webpack.DllPlugin({
name: '_dll_[name]', // name === library
path: path.resolve(__dirname, 'dist', 'manifest.json') // manifest.json 定义了各个模块的路径
})
]
}
manifest.json就是一个任务清单or动态链接库，在这个清单里面查找react
npx webpack --config webpack.config.react.js
在index.html增加引用
<body>
<div id="root"></div>
<script src="/_dll_react.js"></script>
</body>
在webpack.config.js 中配置，现在动态链接库manifest.json中查找,如果没有再打包react
plugins: [
new webpack.DllReferencePlugin({
manifest: path.resolve(__dirname, 'dist', 'manifest.json')
})
]
DLLPlugin 和 DLLReferencePlugin
npm run build
打包后的bunle.js文件变小
npm run dev
可以理解为先把react打包，后面每次都直接使用react打包后的结果