[打包优化]Webpack DLL

您所在的位置：网站首页 › webpack分环境打包 › [打包优化]Webpack DLL

[打包优化]Webpack DLL

2023-08-18 19:59| 来源: 网络整理| 查看: 265

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

认识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") })

掘金：前端LeBron

知乎：前端LeBron

持续分享技术博文，关注微信公众号👉🏻 前端LeBron

【本文地址】

[打包优化]Webpack DLL

[打包优化]Webpack DLL

今日新闻

推荐新闻