如何优化vue项目提升打包速度减小打包之后的文件大小
项目一开始打包需要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分钟左右确实有很大变化,但是这还不是最终目标,还在继续摸索中,大家有更好的方法可以分享出来,一起学习