[打包优化]Webpack DLL

原创不易，未经作者允许禁止转载！！

认识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文件的文件路径

代码语言：javascript复制

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模块中;

代码语言：javascript复制

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 react javascript

0 人点赞