webpack的DllPlugin、DllReferencePlugin插件使用,提升打包速度之旅

作者: tww844475003 分类: 前端开发 发布时间: 2021-08-30 22:44

webpack.dll.js

'use strict'

const path = require('path');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: {
    vue: ['vue'],
    vueRouter: ['vue-router']
  },
  output: {
    filename: '[name]_[hash].dll.js',
    path: path.resolve(process.cwd(), 'dll'),
    library: '[name]'
  },
  plugins: [
    new CleanWebpackPlugin(),
    new webpack.DllPlugin({
      name: '[name]',
      path: path.resolve(process.cwd(), 'dll/[name]-manifest.json')
    })
  ]
}

这里如果简单的使用 webpack.DllReferencePlugin ,得每次 npm run dll 后必须复制 dll 文件至 build 目录,并在 index.js 模块文件中引入,势必是有点麻烦。

new webpack.DllReferencePlugin({
   manifest: path.resolve(process.cwd(), 'dll/vue-manifest.json'),
}),
new webpack.DllReferencePlugin({
   manifest: path.resolve(process.cwd(), 'dll/vueRouter-manifest.json'),
})

那有没有更好的方法,答案是有的,下面我们来一起完成

  1. 复制 dll 文件至 build 目录
  2. 批量追加 webpack.DllReferencePlugin
  3. 添加 dll.js 至模块index.html

所需要依赖模块

npm i -D copy-webpack-plugin

npm i -D add-asset-html-webpack-plugin

npm i -D glob-all

const glob = require('glob-all');
const OtherPlugins = [];
const DllFiles = glob.sync([path.join('dll/**.dll.js')]);
DllFiles.forEach(file => {
  OtherPlugins.push(
    new AddAssetHtmlWebpackPlugin({
      filepath: path.resolve(process.cwd(), file),
      publicPath: 'dll'
    })
  )
})
const ManifestFiles = glob.sync([path.join('dll/**.json')]);
ManifestFiles.forEach(file => {
  OtherPlugins.push(
    new webpack.DllReferencePlugin({
      manifest: path.resolve(process.cwd(), file),
    })
  )
})
module.exports = {
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: 'index.html'
    }),
    new CopyPlugin({
      patterns: [
        {
          from: path.resolve(process.cwd(), 'dll'),
          to: path.resolve(process.cwd(), 'dist/dll')
        }
      ]
    })
  ].concat(OtherPlugins)
}

这样是不是很简洁就实现了,是不是比手动添加更新方便。

当然还有很多其它方式可以实现,笔者这只是抛砖引玉。

比如:

new HtmlWebpackPlugin({
  filename: 'index.html',
  template: './src/index.jade',
  inject: {
    head: ['chunks2'],
    body: ['chunks1', 'chunks3', 'vendor']
  },
  chunks: ['chunks1', 'chunks2', 'chunks3', 'vendor']
})

HtmlWebpackPlugin 模板是支持 ejs 语法,还可以在模板中使用 ejs for 循环实现。

前端开发那点事
微信公众号搜索“前端开发那点事”

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注