DllPlugin和DllReferencePlugin打包

工具

使用webpack打包的时候,我们一个项目引入了多个较大的包以后,这些包本身并不会运行,我们也不会修改这些包的代码,但是每当我们修改了业务代码之后,这些包也会被重新打包。极大的浪费了时间,这时我们就需要使用这个工具预先把静态资源提前打包,以后修改源文件再打包时就不会打包这些静态资源文件了。

以vue-cli生成的项目为例:

1. 生成项目

// 全局安装vue-cli脚手架 npm install vue-cli -g // 初始化项目 vue init webpack-simple www.isyxf.com cd www.isyxf.com // 安装基础配置包 npm install // 安装依赖模块(静态资源) npm install vuex vue-router axios lodash element-ui -S

2. 目录结构

vue-cli初始化项目后有做调整目录结构,最终的如下
项目目录结构

3. DLL预打包配置

① 把需要预打包的添加到package.json dll中

{ "name": "www.isyxf.com", "version": "1.0.0", "description": "www.isyxf.com", "author": "yanxiaofei <forget_love2161@126.com>", "private": true, "scripts": { "dev": "node build/dev-server.js", "start": "node build/dev-server.js", "build": "node build/build.js", "lint": "eslint --ext .js,.vue src", "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/", }, "pre-commit": [ "lint" ], // 添加的预打包列表 "dll": [ "vue/dist/vue.esm.js", "vuex", "axios", "vue-router" ], ...... }

② 在build目录下创建webpack.dll.config.js配置文件

var path = require('path') var webpack = require('webpack') var AssetsPlugin = require('assets-webpack-plugin') // 引入需要预打包列表 const packageJson = require('../package') module.exports = { entry: { libs: packageJson.dll, }, output: { path: path.join(__dirname, '../static/js'), // 打包后文件输出的位置 // 带上hash,以免线上缓存问题 filename: '[name]_[hash:6].dll.js', library: '[name]_[hash:6]_library', }, plugins: [ new webpack.DllPlugin({ path: path.join(__dirname, '.', '../dll/[name]-manifest.json'), name: '[name]_[hash:6]_library', context: __dirname, }), // 压缩打包的文件,与该文章主线无关 new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, }, }), // 为了生成JSON信息,给HtmlWebpackPlugin输出到页面用的 new AssetsPlugin({ filename: 'config.json', path: path.join(__dirname, '.','../dll'), }), ], }

③ 回到package.json文件中,添加npm run dll命令

"scripts": { // 需要添加的dll配置 "dll": "webpack --config ./build/webpack.dll.config.js" },

④ 在根目录下执行npm run dll会得到以下3个文件

  • /dll/config.json (预打包后的文件名,用于HtmlWebpackPlugin的配置)
  • /dll/libs-manifest.json(这是用来做关联id的,打包的时候不会打包进去)
  • /static/js/libs_f2ef86.dll.js(预打包后的文件)
    预打包

4. 项目中引入预打包文件

① 修改build/webpack.base.conf.js,添加DllReferencePlugin的配置

const manifest = require('../libs-manifest.json') ...... plugins: [ new webpack.DllReferencePlugin({ manifest }), ]

② 打开webpack.dev.conf.js和 webpack.prod.conf.js,通过HtmlWebpackPlugin把预打包文件名添加到index.html文件中

...... var dllConfig = require("../dll/config.json") ...... plugins: [ new HtmlWebpackPlugin({ // 增加 libJsName: dllConfig.libs.js, }), ]

③ 打开根目录下的index.html文件

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta data-vue-meta="true" name="keywords" content="前端开发,Node.js,Vue,Y. Jer"/> <meta data-vue-meta="true" name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/> <title>Y. Jer 的虚拟笔记</title> // 添加如下代码 <script src="/static/js/<%= htmlWebpackPlugin.options.libJsName %>"></script> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>

至此,使用DllPlugin和DllReferencePlugin打包全部步骤已经完成。

参考文章