webpack优化配置-dll方式将第三方库独立打包

首先,我们需要使用 DllPlugin 插件将第三方库打包成一个独立的文件,然后再在项目中引入这个文件。

  1. 安装 DllPlugin 插件

    shell 复制代码
    npm install --save-dev webpack webpack-cli webpack-dev-server webpack-manifest-plugin
  2. 创建一个新的 webpack 配置文件,比如 webpack.dll.config.js,并添加以下内容:

    javascript 复制代码
    const path = require('path');
    const webpack = require('webpack');
    
    module.exports = {
      mode: 'production',
      entry: {
        vendor: ['react', 'react-dom', 'lodash'], // 第三方库的名称
      },
      output: {
        path: path.resolve(__dirname, 'dll'),
        filename: '[name].dll.js',
        library: '[name]',
      },
      plugins: [
        new webpack.DllPlugin({
          path: path.resolve(__dirname, 'dll', '[name]-manifest.json'),
          name: '[name]',
        }),
      ],
    };

    这里的 entry 字段是一个对象,键是你想要将哪些第三方库打包成独立文件,值是这些第三方库的名称。在这个例子中,我们将 reactreact-domlodash 打包成一个名为 vendor 的文件。

    output 字段配置了输出的文件路径和文件名,library 字段定义了生成的文件的变量名。

    plugins 字段使用 DllPlugin 插件,指定了生成的 manifest 文件的路径和名称。

  3. package.json 文件中添加以下脚本命令:

    json 复制代码
    "scripts": {
      "dll": "webpack --config webpack.dll.config.js"
    }
  4. 运行命令 npm run dll,会在项目根目录下生成一个 dll 文件夹,里面包含了生成的第三方库的文件和 manifest 文件。

  5. 在项目的 webpack 配置文件中,添加以下内容来引入生成的第三方库文件:

    javascript 复制代码
    const webpack = require('webpack');
    const path = require('path');
    
    module.exports = {
      // ...
      plugins: [
        new webpack.DllReferencePlugin({
          context: path.resolve(__dirname, 'src'),
          manifest: require('./dll/vendor-manifest.json'),
        }),
      ],
    };

    这里的 DllReferencePlugin 插件用于引入生成的 manifest 文件。

通过以上步骤,我们就可以使用 DllPlugin 插件将第三方库独立打包,并在项目中引入生成的文件。这样做可以提高构建速度,减少了第三方库的重新打包时间。

相关推荐
贩卖纯净水.3 分钟前
Chrome调试工具(查看CSS属性)
前端·chrome
栈老师不回家1 小时前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙1 小时前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠1 小时前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds1 小时前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
吕彬-前端2 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱2 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai3 小时前
uniapp
前端·javascript·vue.js·uni-app
帅比九日3 小时前
【HarmonyOS Next】封装一个网络请求模块
前端·harmonyos
bysking3 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js