写作不易,未经作者允许禁止以任何形式转载!
如果觉得文章不错,欢迎关注、点赞和分享!

[打包优化]Webpack DLL (juejin.cn)

认识DLL库

  • 什么是DLL

    • DLL全称是动态链接库(Dynamic Link Library),是为软件在Windows中实现共享函数库的一种实现方式;
    • 那么webpack中也有内置DLL的功能,它指的是可以将可以共享,并且不经常改变的代码,抽取成一个共享的库;
    • 这个库在之后编译的过程中,会被引入到其他项目的代码中,减少的打包的时间;
  • DDL库的使用分为两步:

    • 第一步:打包一个DLL库;
    • 第二步:项目中引入DLL库

DLL打包

webpack内置DllPlugin帮助生成DLL文件

  • webpack.common.js
    • context:执行上下文,
    • entry:
      • key:name(placeholder)
      • value:要打包的包名
    • output(常规)
    • plugins
      • DllPlugin
        • name:定义生成dll文件的名称
        • path:生成dll文件的文件路径
const path = require("path");
const {DllPlugin} = require("webpack");
const {merge} = require("webpack-merge")

const commonConfig = (isProduction)=>{
return {
context: path.resolve(__dirname, "../"),
entry: {
react:["react","react-dom"]
},
output: {
path:path.resolve(__dirname,"../dll"),
filename:"dll_[name].js",
library:"dll_[name]"
},
plugins: [
new DllPlugin({
name:'[name].manifest.json',
path:path.resolve(__dirname, "../dll/[name].manifest.json")
})
],
}
}
const devConfig = require('./webpack.dev')
const prodConfig = require('./webpack.prod')

module.exports = function (env) {
const isProduction = env.production;
process.env.NODE_ENV = isProduction ? "production" : "development"

const config = isProduction ? prodConfig : devConfig
return merge(commonConfig(isProduction), config)
}

打包完成后,在根目录下会有一个dll文件夹,内有Dll文件和相应manifest.json文件。

DLL使用

  • 如果我们的代码中使用了react、react-dom,有配置splitChunks的情况下,他们会进行分包,打包到 一个独立的chunk中。
    • 但是现在有了dll_react,不再需要单独去打包它们,可以直接去引用dll_react即可:
    • 第一步:通过DllReferencePlugin插件告知要使用的DLL库;
    • 第二步:通过AddAssetHtmlPlugin插件,将打包的DLL库引入到Html模块中;
new DllReferencePlugin({
context:path.resolve(__dirname, "../"),
manifest:path.resolve(__dirname,"../dll/react.manifest.json")
}),
new AddAssetHtmlWebpackPlugin({
outputPath:"../build/js",
filepath:path.resolve(__dirname, "../dll/dll_react.js")
})

[打包优化]Webpack DLL (juejin.cn)

掘金:前端LeBron

知乎:前端LeBron

持续分享技术博文,关注微信公众号👇🏻

img