精华内容
下载资源
问答
  • Support DllPlugin output

    2020-12-09 04:11:29
    <div><p>The webpack DllPlugin spits out an item with a name like <code>dll vendors</code>. This makes it through the initial checks and then crashes on the <code>fs.lstatSync(item.name).isFile()...
  • 主要介绍了详解如何webpack使用DllPlugin,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Webpack的DllPlugin没有样板代码
  • 如何使用DllPlugin

    2020-07-01 23:05:44
    假如有两个万年不变的库 "react": "^16.12.0", ...const DllPlugin = require('webpack/lib/DllPlugin') const { srcPath, distPath } = require('./paths') module.exports = { mode: 'development', // JS 执行

    假如有两个万年不变的库

        "react": "^16.12.0",
        "react-dom": "^16.12.0"
    

    dll配置文件

    const path = require('path')
    const DllPlugin = require('webpack/lib/DllPlugin')
    const { srcPath, distPath } = require('./paths')
    
    module.exports = {
      mode: 'development',
      // JS 执行入口文件
      entry: {
        // 把 React 相关模块的放到一个单独的动态链接库
        react: ['react', 'react-dom']
      },
      output: {
        // 输出的动态链接库的文件名称,[name] 代表当前动态链接库的名称,
        // 也就是 entry 中配置的 react 和 polyfill
        filename: '[name].dll.js',
        // 输出的文件都放到 dist 目录下
        path: distPath,
        // 存放动态链接库的全局变量名称,例如对应 react 来说就是 _dll_react
        // 之所以在前面加上 _dll_ 是为了防止全局变量冲突
        library: '_dll_[name]',
      },
      plugins: [
        // 接入 DllPlugin
        new DllPlugin({
          // 动态链接库的全局变量名称,需要和 output.library 中保持一致
          // 该字段的值也就是输出的 manifest.json 文件 中 name 字段的值
          // 例如 react.manifest.json 中就有 "name": "_dll_react"
          name: '_dll_[name]',
          // 描述动态链接库的 manifest.json 文件输出时的文件名称
          path: path.join(distPath, '[name].manifest.json'),
        }),
      ],
    }
    

    打包变成这个样
    在这里插入图片描述
    如何引用我们打包的dll呢?如下

    在我们的index.html引入

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <div id="root"></div>
    
        <script src="./react.dll.js"></script>
    </body>
    </html>
    

    webpack.dev.js

    const path = require('path')
    const webpack = require('webpack')
    const { smart } = require('webpack-merge')
    const webpackCommonConf = require('./webpack.common.js')
    const { srcPath, distPath } = require('./paths')
    
    // 第一,引入 DllReferencePlugin
    const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');
    
    module.exports = smart(webpackCommonConf, {
        mode: 'development',
        module: {
            rules: [
                {
                    test: /\.js$/,
                    loader: ['babel-loader'],
                    include: srcPath,
                    exclude: /node_modules/ // 第二,不要再转换 node_modules 的代码
                },
            ]
        },
        plugins: [
            new webpack.DefinePlugin({
                // window.ENV = 'production'
                ENV: JSON.stringify('development')
            }),
            // 第三,告诉 Webpack 使用了哪些动态链接库
            new DllReferencePlugin({
                // 描述 react 动态链接库的文件内容
                manifest: require(path.join(distPath, 'react.manifest.json')),
            }),
        ],
        devServer: {
            port: 8080,
            progress: true,  // 显示打包的进度条
            contentBase: distPath,  // 根目录
            open: true,  // 自动打开浏览器
            compress: true,  // 启动 gzip 压缩
    
            // 设置代理
            proxy: {
                // 将本地 /api/xxx 代理到 localhost:3000/api/xxx
                '/api': 'http://localhost:3000',
    
                // 将本地 /api2/xxx 代理到 localhost:3000/xxx
                '/api2': {
                    target: 'http://localhost:3000',
                    pathRewrite: {
                        '/api2': ''
                    }
                }
            }
        }
    })
    
    
    展开全文
  • The DllPlugin and DllReferencePlugin provide means to split bundles in a way that can drastically improve build time performance. DllPlugin 结合 DllRefrencePlugin 插件的运用,对将要产出的bundle文件...
  • 主要介绍了webpack DllPlugin xxx is not defined解决办法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • DLLPlugin 和 DLLReferencePlugin的使用 DLLPlugin 和 DLLReferencePlugin 用某种方法实现了拆分 bundles,同时还大大提升了构建的速度。 1.首先build文件夹添加—-webpack.dll.config.js: var path = require(...
  • 主要介绍了vue-cli3 DllPlugin 提取公用库 ,需要的朋友可以参考下
  • 主要介绍了详解基于DllPlugin和DllReferencePlugin的webpack构建优化,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • <div><p>I am trying to improve performance by using your awesome plugin and at the same time webpack <a href="https://webpack.github.io/docs/list-of-plugins.html#dllplugin">dllplugin</a>. But from my ...
  • 主要介绍了vue-cli3使用 DllPlugin 实现预编译提升构建速度 ,需要的朋友可以参考下
  • 如何使用 Webpack 的 Dllplugin

    千次阅读 2018-06-14 14:09:14
    在使用 Dllplugin 之前,首先我们应该了解它是干什么的,如果你的项目够大的话,可能每次编译都要花费很多时间,那么Dllplugin就是用来处理这个事情的。通过使用它你可以大大缩短编译的时间,提升构建速度。接下来...

    在使用 Dllplugin 之前,首先我们应该了解它是干什么的,如果你的项目够大的话,可能每次编译都要花费很多时间,那么Dllplugin就是用来处理这个事情的。通过使用它你可以大大缩短编译的时间,提升构建速度。接下来我们就来看看如何使用这个配置。

    下面是官网给出的介绍:

     

    DllPlugin

    这个插件是在一个额外的独立的 webpack 设置中创建一个只有 dll 的 bundle(dll-only-bundle)。 这个插件会生成一个名为 manifest.json 的文件,这个文件是用来让 DLLReferencePlugin 映射到相关的依赖上去的。

    • context (optional): manifest 文件中请求的上下文(context)(默认值为 webpack 的上下文(context))
    • name: 暴露出的 DLL 的函数名 (TemplatePaths[hash] & [name] )
    • path: manifest json 文件的绝对路径 (输出文件)
    new webpack.DllPlugin(options)
    

    在给定的 path 路径下创建一个名为 manifest.json 的文件。 这个文件包含了从 require 和 import 的request到模块 id 的映射。 DLLReferencePlugin 也会用到这个文件。

    这个插件与 output.library 的选项相结合可以暴露出 (也叫做放入全局域) dll 函数。

    DllReferencePlugin

    这个插件是在 webpack 主配置文件中设置的, 这个插件把只有 dll 的 bundle(们)(dll-only-bundle(s)) 引用到需要的预编译的依赖。

    • context: (绝对路径) manifest (或者是内容属性)中请求的上下文
    • manifest: 包含 content 和 name 的对象,或者在编译时(compilation)的一个用于加载的 JSON manifest 绝对路径
    • content (optional): 请求到模块 id 的映射 (默认值为 manifest.content)
    • name (optional): dll 暴露的地方的名称 (默认值为 manifest.name) (可参考 externals)
    • scope (optional): dll 中内容的前缀
    • sourceType (optional): dll 是如何暴露的 (libraryTarget)
    new webpack.DllReferencePlugin(options)
    

    通过引用 dll 的 manifest 文件来把依赖的名称映射到模块的 id 上,之后再在需要的时候通过内置的 __webpack_require__ 函数来 require 他们

    与 output.library 保持 name 的一致性。

     

    从这里可以看出 Dllplugin和DllReferencePlugin是配合使用的,具体如下:

    1.首先你需要创建一个webpack.dll.config.js文件,代码如下:

    'use strict'
    
    const path = require('path')
    const webpack = require('webpack')
    const CleanWebpackPlugin = require('clean-webpack-plugin')
    const AssetsPlugin = require('assets-webpack-plugin')
    
    module.exports = {
      entry: {
        vendor: [
          'vue/dist/vue.esm.js',
          'vue-router/dist/vue-router.esm.js',
          'element-ui',
          'vuex/dist/vuex.esm.js',
          'moment'
        ]
      },
      output: {
        path: path.join(__dirname, '../static/js/'), // 生成的文件存放路径
        filename: 'dll.[name].[chunkhash].js', // 生成的文件名字(默认为dll.vendor.[hash].js)
        library: '[name]_[chunkhash]' // 生成文件的映射关系,与下面DllPlugin中配置对应
      },
      plugins: [
        new webpack.DllPlugin({
        // 会生成一个json文件,里面是关于dll.js的一些配置信息
          path: path.join(__dirname, '[name]-manifest.json'),
          name: '[name]_[chunkhash]', // 与上面output中配置对应
          context: __dirname // 上下文环境路径(必填,为了与DllReferencePlugin存在与同一上下文中)
        }),
        new webpack.DefinePlugin({
          'process.env.NODE_ENV': JSON.stringify('production')
        }),
        new AssetsPlugin({  //
          filename: 'bundle-conf.json',
          path: __dirname
        }),
        new webpack.optimize.UglifyJsPlugin({
          output: {
            comments: false
          },
          compressor: {
            warnings: false
          }
        }),
        new CleanWebpackPlugin(['dll'])
      ]
    }

     

    2.在你的生产环境配置文件中加入DllReferencePlugin插件:

     

    const merge = require('webpack-merge');
    
    const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
    
    const common = require('./webpack.common.js');
    
    const webpack = require('webpack');
    
    const CommonsPkg = require('./bundle-conf.json')
    
    
    module.exports = merge(common,{
    
    devtool: 'source-map',
    
    plugins: [
    
    new UglifyJSPlugin(),
    
    new webpack.DefinePlugin({
    
    'process.env.NODE_ENV': JSON.stringify('production')
    
    }),
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
      }
    ]),
    new HtmlWebpackPlugin({
        ...
        bundleName: `/static/js/${CommonsPkg.vendor.js}`
        ...
    }),
    new webpack.HashedModuleIdsPlugin(),
    
    new webpack.DllReferencePlugin({
    
    context: __dirname, // 与DllPlugin中的那个context保持一致
    
    manifest: require('./vendor-manifest.json') // 下面这个地址对应webpack.dll.config.js中生成的那个json文件的路径
    
    })
    
    ]
    
    })

     

     

    3.将生成的dll.js 文件引入index.html中:

    <!DOCTYPE html>
    
    <html lang="en">
    
    <head>
    
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <title>DllPlugin</title>
    
    </head>
    
    <body>
    
    <script type=text/javascript src="<%= htmlWebpackPlugin.options.bundleName %>"></script>
    
    </body>
    
    </html>

    注意:src的路径的引入位置

    4.package.json文件中加入dll:

    "scripts": {
    
    "build": "webpack --config webpack.prod.js",
    
    "build:dll": "webpack --config webpack.dll.config.js"
    
    }

     

    5.接下来yarn build,然后你就能够发现,编译的速度会相当的快奥!

     

    使用插件前:

     

     

     

    使用插件后:

     

    展开全文
  • 话不多说直接上代码/步骤 1、安装webpack4.x 2、创建 webpack.dll.config.js 的文件 ...const DllPlugin = require('webpack/lib/DllPlugin'); const rootPath = require('app-root-path')...

    话不多说直接上代码/步骤

     

    1、安装webpack4.x

    2、创建  webpack.dll.config.js 的文件

    3、这样写入配置

    const path = require('path');
    const DllPlugin = require('webpack/lib/DllPlugin');
    const rootPath = require('app-root-path').path;
    module.exports = {
        entry: {
            react: ["react"],
        },
        output: {
            filename: '[name].dll.js',
            path: path.join(rootPath, 'dll/'),
            library: '_dll_[name]'
        },
        plugins: [
            new DllPlugin({
                name: '_dll_[name]',
                path: path.join(rootPath, 'client', 'dll/[name].manifest.json')
            })
        ]
    };

    4、 执行打包  webpack --config webpack.dll.config.js

         接下来你将会得到这样两个文件

     

    5、接下来在你的打包webpack配置里面引入  .json的文件

    6、在你的页面引入

    第二个.js的文件

     

    7、npm run build 

     

    是不是速度快了一大半,在依赖多的项目里,表现的更明显

    展开全文
  • DllPlugin+DllReferencePlugin拆分第三方依赖项目打包优化DllPlugin DllReferencePluginwebpack.dll.jspackage.jsonDllReferencePluginAddAssetHtmlPlugin另外:dllplugin适用哪种环境? 项目打包优化 webpack对...

    上一篇:webpack4+vue2的经典配置(common+dev+build)


    项目打包优化

    webpack对项目的打包优化有内置的webpack.optimization.splitChunks分包策略,可以将node_modules的第三方包和其他代码提取出来。同时,webpack也有==DllPlugin 和 DllReferencePlugin ==,同样也能拆分 bundles。

    module.exports = {
      //...
      optimization: {
        splitChunks: {
          chunks: 'async',
          minSize: 20000,
          minRemainingSize: 0,
          minChunks: 1,
          maxAsyncRequests: 30,
          maxInitialRequests: 30,
          enforceSizeThreshold: 50000,
          cacheGroups: {
            defaultVendors: {
              test: /[\\/]node_modules[\\/]/,
              priority: -10,
              reuseExistingChunk: true,
            },
            default: {
              minChunks: 2,
              priority: -20,
              reuseExistingChunk: true,
            },
          },
        },
      },
    };
    W
    

    提示:以下是本篇文章正文内容,下面案例可供参考

    DllPlugin DllReferencePlugin

    “DLL” 一词代表微软最初引入的动态链接库。使用DllPlugin插件会生成一个名为 manifest.json 的文件。
    然后利用DllReferencePlugin,通过引用 dll文件夹的 manifest 文件来把依赖的名称映射到模块的 id 上。
    情景说明:当提前将指定某些第三方包单独打包出来,以后项目进行打包的时候,webpack读取DllPlugin生成的manifest.json 内容,那么webpack就不再重复打包第三方包,直接引用dll文件夹的js文件。
    下面一步一步来

    webpack.dll.js

    首先,先在项目根目录下建立webpack.dll.js文件,代码如下:
    目的就是将我们常用的第三方包单独抽取出来并且生成manifest.json文件,可以在entry中设置多个入口文件,相应的打包出多个文件(可防止打包出来的单独js文件过大)

    const path = require("path");
    const webpack = require("webpack");
    module.exports = {
      mode: "production",
      entry: {
        LodashLibrary: ["lodash"],//数组内容写入我们指定要打包的第三方包名字
        VueLibrary: ["vue", "vue-router", "vuex"],
      },
      output: {
        filename: "[name].dll.js",
        path: path.resolve(__dirname, "dll"),
        // library的值必须和后面dllplugin中的name一致 后面会说明
        library: "[name]_dll_[hash]",
      },
      plugins: [
        new webpack.DllPlugin({
          // 动态链接库的全局变量名称,需要和 output.library 中保持一致
          // name字段的值也就是输出的 manifest.json 文件 中 name 字段的值
          name: "[name]_dll_[hash]",
          // 描述动态链接库的 manifest.json 文件输出时的文件名称
          path: path.join(__dirname, "dll", "[name].manifest.json"),
        }),
      ],
    };
    
    

    package.json

    然后,在package.json中新建一个脚本命令

    "dll": "webpack --config webpack.dll.config.js"
    

    然后,在终端输入:npm run dll,可以看到dll文件夹中有了LodashLibrary.dll.js,VueLibrary.dll.js,LodashLibrary.manifest.json,VueLibrary.manifest.json。
    在这里插入图片描述

    第三方包顺利打包出来,如果让webpack知道去引用呢?

    DllReferencePlugin

    指定manifest的位置,让webpack打包时去读取,找到对应第三方包,从而跳过打包该第三方包。

    plugins:[
     new webpack.DllReferencePlugin({
              manifest: path.resolve(__dirname, "./dll", 'LodashLibrary.manifest.json'),
            })
     new webpack.DllReferencePlugin({
              manifest: path.resolve(__dirname, "./dll", 'VueLibrary.manifest.json'),
            })
     ]
    

    AddAssetHtmlPlugin

    将指定静态资源放在html下,达到scrpt引用对应的js文件。在webpack.plugins添加以下内容:
    cnpm i add-asset-html-webpack-plugin -D

    const AddAssetHtmlPlugin = require("add-asset-html-webpack-plugin");
    ...
    new AddAssetHtmlPlugin({
              filepath: path.resolve(__dirname, "./dll", ’LodashLibrary.dll.js‘),
     })
     new AddAssetHtmlPlugin({
              filepath: path.resolve(__dirname, "./dll", ’VueLibrary.dll.js‘),
     })
    

    以后,npm run build时,速度快很多,打包出来的文件,也成功引用了dll的内容
    在这里插入图片描述

    另外:dllplugin适用哪种环境?

    我觉得两种环境都可以用的
    在dev下引用:可以看到也会去使用dll的包
    在这里插入图片描述
    在这里插入图片描述
    关掉dll的应用,npm run dev 一次,打包时间稍微变长了,第三包都放在了defaultVendors文件中
    在这里插入图片描述
    build环境下:
    关掉dl
    在这里插入图片描述

    开启dll:
    在这里插入图片描述

    总结:dll提升了打包构建速度,减少了第三包的体积。如果对构建速度没啥要求和体积优化没有更大的要求,用webpack的webpack.optimization.splitChunks也是够用的。

    展开全文
  • Webpack 内置插件 DllPlugin 可以将一些较长时间内、稳定不变的包或组件拆分出来,以 script 外链的形式引入页面,以减少 webpack 打包时间,长期缓存。本文记录了 Webpack 内置插件 DllPlugin 基本应用方法。 本文...
  • webpack之DllPlugin详细解析

    千次阅读 2019-08-19 10:10:02
    功能:DLLPlugin和DLLReferencePlugin用某种方法实现了拆分 bundles,同时还大大提升了构建的速度。-webpack官网 何时使用:当有依赖包较大时,因依赖包不常改动(一般基本不会去改),如:react,axios,antd等,...
  • Webpack DllPlugin 和 DllReferencePlugin 1.插件的作用 是一种分包的解决方案,它可以将部分代码抽出来,单独形成一个插件包,类似windows系统中的dll包. 2.插件的用途 因为插件的作用是分离代码,所以常用在代码中...
  • 分离第三方类库 DllPlugin 和 DllReferencePlugin
  • The DllPlugin and DllReferencePlugin provide means to split bundles in a way that can drastically improve build time performance. DllPlugin结合DllRefrencePlugin插件的运用,对将要产出的bundle文件进行...
  • DllPlugin配置使用: (1) 之前引入模块包时,会依据下面的代码分割配置,将模块包打到了vendors文件中 在每次打包时,都会分析各个模块包的代码,然后进行处理,实际上这些包的代码我们也只是引入,并不能改变,...
  • <p>The current modules detection (which will be passed to the DllPlugin) can't (and shouldn't) caught all imports which may be include in the dll. <p><strong>So we need an option to manually ...
  • vuecli3 webpack dllplugin配置

    千次阅读 2019-08-14 18:01:58
    配置webpack dllplugin提升打包速度,依赖库越大速度越明显 1.全局安装webpack、webpack-cli npm install webpack -g npm install webpack-cli -g 查看安装是否成功 webpack -v 2.package.json "scripts": ...
  • webpack踩坑:DllPlugin和DllReferencePlugin配置 有个项目比较大,想着进行配置优化,提高打包速度然后网上搜了搜决定试试DllPlugin和DllReferencePlugin,但是跟着网上好几篇博客质量挺高的配下来一直有错误… 就...
  • DLLPlugin 和 DLLReferencePlugin 用某种方法实现了拆分 bundles,同时还大大提升了构建的速度。 webpack.dll.js const { resolve } = require('path'); const webpack = require('webpack'); module.exports = ...
  • 本文介绍了 Webpack 中 DllPlugin 插件的使用,以及配合使用 AddAssetHtmlPlugin 将构建好的 JS 文件插入到 html 页面中...DLLPlugin 就是将包含大量复用模块且不会频繁更新的库进行编译,只需要编译一次,编译完成...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 422
精华内容 168
关键字:

dllplugin