使用webpack.DllPlugin与webpack.DllReferencePlugin解决webpack打包慢问题

xiaoxiao2021-02-28  60

       因为公司的vue项目要与之前的结合,所以需要webpack打包后的代码,每次修改内容都需要重新打包,webpack打包速度太慢,因此上网搜索找到解决办法: 使用webpack插件webpack.DllPlugin与webpack.DllReferencePlugin将不需要改动的第三方插件与自己的业务代码进行分开打包, 首先: 在项目根目录新建一个文件webpack.dll.config.js

const path = require('path'); const webpack = require('webpack'); module.exports = { entry: { vendor: ['vue-router','vuex','vue/dist/vue.common.js','vue/dist/vue.js','vue-loader/lib/component-normalizer.js','vue'] }, output: { path: path.resolve(base.path), filename: '[name].dll.js', library: '[name]_library' }, plugins: [ new webpack.DllPlugin({ path: path.resolve('./dist', '[name]-manifest.json'), name: '[name]_library' }) ] };

将是用到的第三方插件添加到vendor中 然后:在webpack.config.js中添加代码

plugins: [ new webpack.DllReferencePlugin({ manifest: require('./dist/vendor-manifest.json') }) ]

还需要在入口html文件中引入vendor.dll.js

<script type="text/javascript" src="./../vendor.dll.js"></script>

然后在package.json文件中添加快捷命令(划线句子):

"scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", "build": "cross-env NODE_ENV=production webpack --progress --hide-modules", "build:dll": "webpack --config webpack.dll.config.js" ----------------------------------------------------- },

最后打包的时候首先执行npm run build:dll命令会在打包目录下生成 vendor-manifest.json文件与vendor.dll.js文件。 Dll这个概念应该是借鉴了Windows系统的dll。一个dll包,就是一个纯纯的依赖库,它本身不能运行,是用来给你的app引用的。 打包dll的时候,Webpack会将所有包含的库做一个索引,写在一个manifest文件中,而引用dll的代码(dll user)在打包的时候,只需要读取这个manifest文件,就可以了。 然后在执行npm run build 发现现在的webpack打包速度为2,3秒作用,与之前的20秒左右快了很多。

转载请注明原文地址: https://www.6miu.com/read-67340.html

最新回复(0)