项目一开始打包需要30分钟,实在是太慢,经过优化之后打包时间缩短到5分钟之内,并且项目体积由原来的400多M缩小到现在的60多M,可以说是实现了质的飞越,这一切功劳都归功于网上的大神提供的方法,我分享出来大家一起学习
DLLPlugin 和 DLLReferencePlugin的使用
DLLPlugin 和 DLLReferencePlugin 用某种方法实现了拆分 bundles,同时还大大提升了构建的速度。
1.首先build文件夹添加----webpack.dll.config.js:
var path = require("path");
var webpack = require("webpack");
module.exports = {
// 要打包的模块的数组
entry: {
vendor: ['vue/dist/vue.esm.js','vue-router']
},
output: {
path: path.join(__dirname, '../static/js'), // 打包后文件输出的位置
filename: '[name].dll.js',// vendor.dll.js中暴露出的全局变量名。
library: '[name]_library' // 与webpack.DllPlugin中的`name: '[name]_library',`保持一致。
},
plugins: [
new webpack.DllPlugin({
path: path.join(__dirname, '.', '[name]-manifest.json'),
name: '[name]_library',
context: __dirname
}),
]
};
2.在package.json的scripts里加上:
"dll": "webpack --config build/webpack.dll.config.js",
3.运行npm run dll 在static/js下生成vendor-manifest.json;
4.在build/webpack.base.conf.js里加上:
// 添加DllReferencePlugin插件
plugins: [
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('./vendor-manifest.json')
})
],
5.然后在index.html中引入vendor.dll.js:
<div id="app"></div>
<script src="./static/js/vendor.dll.js"></script>
做完这些打包时间由原来的30分钟左右缩短到18分钟左右,还没达到预期的目标,所以继续优化
由于运行在 Node.js 之上的 Webpack 是单线程模型的,所以Webpack 需要处理的事情需要一件一件的做,不能多件事一起做。
我们需要Webpack 能同一时间处理多个任务,发挥多核 CPU 电脑的威力,HappyPack 就能让 Webpack 做到这点,它把任务分解给多个子进程去并发的执行,子进程处理完后再把结果发送给主进程。
由于 JavaScript 是单线程模型,要想发挥多核 CPU 的能力,只能通过多进程去实现,而无法通过多线程实现。
提示:由于HappyPack 对file-loader、url-loader 支持的不友好,所以不建议对该loader使用。
使用 HappyPack
修改你的webpack.config.js 文件
const HappyPack = require('happypack');
const os = require('os');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
module.exports = {
module: {
rules: [
{
test: /\.js$/,
//把对.js 的文件处理交给id为happyBabel 的HappyPack 的实例执行
loader: 'happypack/loader?id=happyBabel',
//排除node_modules 目录下的文件
exclude: /node_modules/
},
]
},
plugins: [
new HappyPack({
//用id来标识 happypack处理那里类文件
id: 'happyBabel',
//如何处理 用法和loader 的配置一样
loaders: [{
loader: 'babel-loader?cacheDirectory=true',
}],
//共享进程池
threadPool: happyThreadPool,
//允许 HappyPack 输出日志
verbose: true,
})
]
}
使用 happypack模块必须同时安装 webpack-parallel-uglify-plugin,os模块否则会报错
npm i happypack
npm i -D webpack-parallel-uglify-plugin
npm i os
这一系列操作之后打包时间缩短到5分钟左右,比起之前的18分钟左右确实有很大变化,但是这还不是最终目标,还在继续摸索中,大家有更好的方法可以分享出来,一起学习