没错，接手的项目打包时间又是巨慢
DllPlugin 也是我们可以采用的有效方法之一
DllPlugin 可以将特定的类库提前打包然后引入。这种方式可以极大的减少打包类库的次数，只有当类库更新版本才有需要重新打包，并且也实现了将公共代码抽离成单独文件的优化方案
首先安装 webpack-cli
cnpm install webpack-cli --save-dev
新建 webpack.dll.config.js 文件处理 dll 插件配置
const path = require('path')
const webpack = require("webpack");
var config = require('./config');
module.exports = {
entry: config.library,
output: {
path: path.join(__dirname, "public/vendor"),
filename: "[name].dll.js",
library: "[name]_[hash]" // vendor.dll.js中暴露出的全局变量名
},
plugins: [
new webpack.DllPlugin({
// manifest缓存文件的请求上下文
context: process.cwd(),
// manifest.json文件的输出位置
path: path.join(__dirname, 'public/vendor', '[name]-manifest.json'),
// 定义打包的公共vendor文件对外暴露的函数名
name: '[name]_[hash]'
})
]
}
新建配置打包入口文件 config/index.js, 这里映射的是上面 dll.config.js 中 entry 入口的配置，在下面可以对入口文件做一些分组：
module.exports = {
// 定义程序中打包公共文件的入口文件
library: {
vue: ['vue', 'vuex', 'vue-router', 'axios', 'crypto-js',
'lodash.get', 'lodash.pick', 'lodash.remove', 'md5', 'dayjs', 'xml2js'],
antvue: ['ant-design-vue'],
viser: ['viser-vue'],
tinymce: ['tinymce'],
codemirror: ['codemirror'],
antv: ['@antv/data-set'],
bpm: ['bpmn-js', 'bpmn-moddle', 'camunda-bpmn-moddle']
}
}
vue.config.js 文件中，需要在configureWebpack中配置忽略已编译的文件：
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')
const webpack = require('webpack')
.....
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
config.plugins = [
...config.plugins,
...Object.keys(dllConfig.library).map(name => {
return new webpack.DllReferencePlugin({
context: '.',
manifest: require(`./public/vendor/${name}-manifest.json`),//引入打包后生生成的manifest文件
})
}),
new AddAssetHtmlPlugin({
// dll文件位置
filepath: path.resolve(__dirname, './public/vendor/*.js'),
// dll 引用路径
// publicPath: process.env.VUE_APP_PUBLIC_PATH ? process.env.VUE_APP_PUBLIC_PATH + 'vendor' : '/vendor',
publicPath: './vendor',
// dll最终输出的目录
outputPath: './vendor'
})
]
}
},
package.json 增加操作命令：
"dll": "webpack -p --progress --config ./webpack.dll.config.js",
如果，每次更改了上诉预编译的文件，需要重新执行 npm run dll ,并且更新到运行环境上
其他还有像， 优化loader就是缩小范围、happypack多线程打包毕竟node 是单线程的、升级webpack毕竟越高级处理的东东越多、通过别名映射文件路径毕竟webpack可以更快找到文件等等
