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 分钟前
commitlint校验git提交信息
前端
虾球xz33 分钟前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇39 分钟前
HTML常用表格与标签
前端·html
疯狂的沙粒43 分钟前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员1 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐1 小时前
前端图像处理(一)
前端
程序猿阿伟1 小时前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒1 小时前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪1 小时前
AJAX的基本使用
前端·javascript·ajax
力透键背1 小时前
display: none和visibility: hidden的区别
开发语言·前端·javascript