webpack-dll动态链接库

最新推荐文章于 2024-04-28 10:00:00 发布

前端女孩

最新推荐文章于 2024-04-28 10:00:00 发布

阅读量486

点赞数 1

分类专栏： webpack 文章标签： webpack 前端 node.js

本文链接：https://blog.csdn.net/weixin_45002586/article/details/127843393

版权

webpack 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

webpack-dll动态链接库：用于防止重复打包不会发生变化的第三方模块，提升webpack打包效率。

配置步骤：

(1)单独配置一个配置文件打包不会发生变化的第三方库webpack.config.dll.js：
(2)通过插件将打包好的库引入到界面上,add-asset-html-webpack-plugin
(3)生成动态库的映射关系（清单），方便webpack能够从中找到对应的库,DllPlugin
(4)告诉webpack去哪里查找动态库
webpack回到指定的映射文件中查找对应的动态库,找到了就不会重新打包，如果找不到才会重新打包。DllReferencePlugin。

webpack.config.dll.js：

const path = require('path');
const webpack = require('webpack');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: {
    element: ['element-ui'],
    g2: ['@antv/g2'],
  },
  output: {
    filename: '[name].dll.js',
    path: path.resolve(__dirname, '../dll'),
    library: '[name]',
  },
  optimization: {
    minimizer: [
      new TerserPlugin({
        extractComments: false, //不将注释提取到单独的文件中
      }),
    ],
  },
  plugins: [
    /*
    DllPlugin作用:
    在打包第三方库的时候生成一个清单文件
    * */
    new webpack.DllPlugin({
      name: '[name]',
      path: path.resolve(__dirname, '../dll/[name].manifest.json'),
    }),
  ],
};

webpack.config.common.js

 const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
   new AddAssetHtmlPlugin([
      {
        filepath: path.resolve(__dirname, '../dll/element.dll.js'),
        outputPath: 'assets/dll',
        publicPath: 'assets/dll',
      },
    ]),
    new AddAssetHtmlPlugin([
      {
        filepath: path.resolve(__dirname, '../dll/g2.dll.js'),
        outputPath: 'assets/dll',
        publicPath: 'assets/dll',
      },
    ]),
    new webpack.DllReferencePlugin({
      manifest: path.resolve(__dirname, '../dll/element.manifest.json'),
    }),
    new webpack.DllReferencePlugin({
      manifest: path.resolve(__dirname, '../dll/g2.manifest.json'),
    }),